Question

我基于bootstrap创建了this page，当我用http://www.mobilephoneemulator.com/测试时，页面进入全宽模式，调整到手机上浏览器的屏幕大小。但是，当我在真正的iPhone 6（以及IPad）上执行此操作时，它似乎没有这样做（在Safari和Chrome中），我不知道为什么。也许会出现这种情况，因为它会自动标记到用户名字段，从而缩小？我附上了截图：

enter image description here

Answer 1

尝试将viewport元添加到页面的标题中。移动网站控制缩放非常重要：

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

更多信息请访问Mozilla的MDN：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 2

因为col-sm-6类，宽度设置为50％。

请将col-xs-12添加到div中，使其宽度为100％

请参阅Bootstrap's Documentation

Answer 3

在父div＆＃39; container-fluid＆＃39;。

上创建课程

＆＃13;

<div class="container-fluid">

＆＃13;

将bootstrap类调整为：

＆＃13;

<div class="col-sm-12">

＆＃13;

希望这有帮助。

Answer 4

@John我认为问题在于缩放此处，在<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">标记中添加此<head>，这应该可以解决问题！

具有响应性的CSS问题，不会进入全宽度

4 个答案: