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

Question

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

我的代码：

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

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

提前致谢。

尼尔斯

编辑：

这是我的 CSS。我想要实现的目标：让网站以设备宽度显示。但如果显示尺寸小于 640 像素，则应将视口更改为 640 像素。不适用于 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 */
}