Question

我下载了Twitter Bootstrap示例并使用它创建了一个简单的rails项目。我在需要的地方复制了css，显示效果很好。我还复制了js，一切都在我的桌面上运行得很好：当我改变浏览器的大小时，它会重新整理页面。当使用一些不同大小的“响应式设计测试工具”时，效果很好。

我遇到的问题是在我的iPhone上：它在桌面上显示出类似的问题。

当我尝试Bootstrap Hero示例页面（这是我开始使用的）时，它在我的iPhone上运行良好。

可能出现什么问题？我几乎没有触及任何CSS，我只是在页脚上添加了一个填充。

仅供参考，我更改的CSS是我将我的应用链接到application.css，内容如下：

/* Application stylesheet */

@import url(bootstrap.css);
@import url(bootstrap-responsive.css);

/* Body */
body {
    padding-top: 60px;
    padding-bottom: 40px;   
}   

/* Footer */
footer {
    padding: 20px 0;
}

Answer 1

确保添加：

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

到<head>。

我遇到了类似的问题，我错误地认为这只是视口宽度的问题。

更新：查看@NicolasBADIA答案以获取更完整的版本。

Answer 2

当你在横向视图中转动设备时，frntk提出的代码不起作用，并且virtualeyes给出的解决方案不正确，因为它使用分号而不是逗号。这是正确的代码：

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

来源：https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Answer 3

当然，这是一个非常小的边缘案例，但值得一提。

如果您通过DNS提供商使用域名转发，您的网站最终可能会被包含在iframe中。例如，GoDaddy会在您屏蔽域名并转发时使用此技术。

Answer 4

我被困在这个问题上好几个小时了。

不要忘记将内容放在class myClass { public: myClass(){ for(int i=0;i<1000;i++){ myArray[i]=i; } }; ~myClass(){}; int getValue(int index){return myArray[index];} private: int myArray[1000]; } ; int myFunction(myClass* myObject) { int res=0; for(int i=0;i<1000;i++){ res=res+myObject->getValue(i); } delete myObject; myObject = new myClass(); return res; } int main() { myClass *myObject = new myClass(); int res= myFunction(myObject); delete myObject; return res; }

中

简单的Bootstrap页面在iPhone上没有响应

4 个答案: