html – 困惑在“初始化= 1.0” – iphone 3GS vs 4

发布时间：2020-12-14 21:27:08 所属栏目：资源来源：网络整理

导读：参见英文答案 Android viewport setting “user-scalable=no” breaks width / zoom level of viewport 让我的网站在移动设备上正确扩展时遇到一些问题。我们有一个网站的最小宽度为640px，最大为我目前有元标记： meta name="viewport" content="width=dev

参见英文答案 > Android viewport setting “user-scalable=no” breaks width / zoom level of viewport
让我的网站在移动设备上正确扩展时遇到一些问题。

我们有一个网站的最小宽度为640px，最大为我目前有元标记：

<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />

现在 – 我很困惑的部分是，如果我使用“initial-scale = 1.0”，显然该网站将缩放1：1，它会看起来像一个iphone 3Gs(只会看到一半的网站)。现在，在Iphone 4(具有640px宽分辨率)的情况下，如果使用“initial-scale = 1.0”，它将以640px的比例正确缩放。

或者，如果图形是480像素，3G将需要scale = .667和iOS 4需要1.3，正确吗？

那么你如何让网站完美地融合到边缘呢？浏览器可以检测设备的宽度吗？有很多不同的设备宽度在那里… android，更老的iphones，黑莓的等

得到相当的分解:(感觉像我错过了一些我应该已经知道的重要事情。

编辑似乎“初始化”元标签应该相对于视口缩放站点，然后使用width = device-width设置实际的视口大小。

我似乎遇到的问题是，视口没有缩放到适合设备，不管我使用什么标签，它保持在640px。我在这里缺少什么？

解决方法

我认为原始消息的主要问题是分号在iPhone 4上似乎不起作用。它只能使用逗号分隔符(或只有设备宽度设置)。其他浏览器似乎更加宽容。

以下可以为我工作：

<meta name="viewport" 
      content="width=device-width,initial-scale=1,maximum-scale=1" />

您还需要禁止身体和文档水平滚动：

body,html
{    
    overflow-x: hidden;        
}

Mozilla网站上的更多信息的良好链接：

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!