css - Bootstrap 简单页面在移动设备上没有响应

Question

我的简单 Bootstrap 页面在我的 iphone 上没有响应，但它在我的电脑上使用谷歌浏览器。

缩放在 iphone 上不好，这是我的视口(viewport):

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

iPhone 截图: iphone

屏幕截图 Chrome : chrome

如果有人可以帮助我，

谢谢

Answer 1

根据documentation ，您正在使您的网站像他们不推荐的 native 应用程序。如果是这样的话，你就省略了几个属性。

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

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

所以如果你不想要像网站这样的原生应用，你可以这样做:

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

试试这个:将 1 作为初始比例而不是 1.0；

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