css 响应式网页缩小以适应iOS上的整个页面

aamkag61 于 2023-10-21 发布在 iOS

关注(0)|答案(2)|浏览(144)

我做了一个网页的移动的版本，它在Android和小浏览器窗口上工作没有问题。然而，在iOS上，当用户捏屏幕时，它会缩小以适应屏幕上的整个页面。这是一个很长的页面，所以这不是理想的。
我脑子里有以下想法：

<meta name="viewport" content="width=device-width, 
     initial-scale=1.0, user-scalable=no, shrink-to-fit=no">

我知道iOS 10有一个已知的覆盖user-scalable=no的问题，但这也发生在iOS 9和8上。
有谁知道我该怎么解决这个问题吗？
非常感谢

2条答案

我知道这个主题很老了，但它是搜索这个问题的少数几页之一。您不必禁用缩放来解决此问题。下方的viewport标签可以防止整个页面在收缩网站时显示在viewport中，但保留了用户放大和缩小的功能。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5,minimum-scale=1,user-scalable=yes"/>

meta标记的正确格式如下：

<meta content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,width=device-width" name="viewport">