Question

我有一个移动网站，并且-Part中的Viewport元标记有点问题。

我的代码：

<meta id="testViewport" name="viewport" content="width=640">

它在iPhone 4s上工作正常，但在iPad 2上，它无法正常工作。我希望将视口设置为用户硬件的宽度。有没有办法实现它，或者我必须读出模型类型并使用开关或代码设置视口？

提前致谢。

尼尔斯

编辑：

这是我的CSS。我想要实现的目标：让网站以设备宽度显示。但如果显示尺寸小于640px，则应将视口更改为640px。不适用于iOS 7.0，Safari：

@viewport { 
    width: device-width;    
}
@media screen and (max-device-width: 640px) {
   @viewport {
     width: 640px;
   }
}

编辑＃2：

使用index.html中的JS修复它：

<meta id="viewport" name="viewport" content="width=device-width" />
<script>
    if (window.innerWidth < 640){
    var vp = document.getElementById('viewport');
    vp.setAttribute('content', 'width=640');
    }
</script>

Answer 1

而不是设置content="width=640"尝试此<meta name="viewport" content="width=device-width">

<强>更新

要使用css为视网膜设备提供高分辨率图像/更改缩放，您可以使用以下内容：

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

移动网站 - 视口取决于设备宽度

1 个答案: