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

Posted 2023-03-15

【中文标题】移动网站 - 视口取决于设备宽度

【英文标题】：Mobile Website - Viewport depending on device-width

【发布时间】：2014-03-24 10:40:09

【问题描述】：

我有一个移动网站，但 -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>

【参考方案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 */

【讨论】：

嗨。我试过了，但问题是，iPhone 4S 的实际分辨率是 960x640，而设备宽度仍然是 320。这是由于视网膜显示器造成的。一个针对 640 像素优化的网站在 320 像素上看起来很糟糕。

您可以在 CSS 中使用 mediaquerys 来检测设备的 dpi，如果它具有视网膜设备的 dpi，则使用尺寸为较小设备 2 倍的图像。

嗯，它不起作用。反正我没有图像，只有DIV。问题是，它们被构建为从 640 到 1560 像素的宽度（因此它是可变大小）正确显示，但在 640 下，它开始变得非常糟糕。

他们在哪方面搞砸了？它们只是看起来很糟糕，因为它们太大而看起来不好，还是它们漂浮在另一条线上？如果只是它们对你的屏幕来说太大了，你可以在元视口标签中设置initial-scale=0.5。

是的。但后来我遇到了问题，它们在其他设备上也被缩小了。如果设备是 iPhone 4S 或 iPad 3，我只想设置 initial-scale=0.5。