Question

当我在iphone中加载我的网站时，它不会缩小。我看到的只是左上角最几百平方像素。我是移动优化的新手，但我觉得大多数页面会自动滚动以适应，大多数问题似乎都是针对我所遇到的相反情况（强制手机不缩小）。

我希望整个页面宽度可见，并且使用户必须放大才能阅读文本。

我已尝试使用和不使用以下代码，但没有明显效果。

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

<!--  I Also tried: -->
<meta name="viewport" content="width=1024, initial-scale=1">

Answer 1

使用此处的文档：https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

您似乎应该忽略大多数视口属性，并将用户可扩展性设置为“是”。它现在正在我的iphone上工作。

<meta name="viewport" content="user-scalable = yes">

编辑::移动测试站点不允许缩放，因此它只提供滚动条。使用实际的手机，这是有效的。

Answer 2

尝试使用不同的css并根据客户端设置切换它们（服务器端）。例如，iPhone会像以下一样认同自己：

 HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) 
 AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3

根据您在服务器端可用的脚本语言，您可以更改css。

Here就是一个例子。

Answer 3

视口标签控制页面最初将显示的部分，但页面本身仍应设计为320x460屏幕尺寸，以便在不缩放的情况下显示在iPhone上。如果您不想修改页面结构，可以通过视口控制页面的初始显示方式。

Answer 4

摆脱width=1024，只需输入

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

并清除手机的浏览器缓存。可能甚至要关掉＆amp;然后回来。

如何强制网站扩展以修复移动设备（Iphone android ..）

4 个答案: