如何强制网站适应移动设备（iPhone、Android等）进行缩放？

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">   

- Zach Lysobey

---

我一直在使用http://iphonetester.com/进行测试... - Zach Lysobey

你的意思是“让用户不需要缩放就能阅读文本”，而不是“让用户必须缩放才能阅读文本”吗？ - Doug

@Doug：不是的。我想要页面在手机上完全缩小，以便其1024像素的宽度可以在屏幕上显示而无需滚动。这个网站并不是为了响应式设计或其他聪明的设计而存在的。也许不是最理想的，但这样可以使网站在手机上看起来很有吸引力，并且所有主要组件都可以看到。用户非常擅长缩放，所以我让他们自己操作。 - Zach Lysobey

Answer 1

根据这里的文档：https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

看起来应该忽略大部分的viewport属性，然后将user-scalable设置为“yes”。现在在我的iPhone上已经生效了。

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

编辑：移动测试站点不允许缩放，因此只会显示滚动条。但是在实际手机上可以正常工作。

- Gregg B

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。这里提供一个示例。

- alinoz

---

我同意这是解决问题的最佳方式，但我不准备为移动设备创建全新的样式集。我知道我在手机上看到过没有移动特定css的页面，在移动设备上显示完整的页面宽度（缩小）。此外，这种方法是否会使我不得不为所有标题和其他宽图形创建更小的图像？ - Zach Lysobey

Answer 3

viewport标签控制页面的初始显示区域，但页面本身应该设计为320x460屏幕大小，以便在iPhone上显示而无需缩放。如果您不想修改页面结构，则viewport可以控制页面的初始显示方式。

- Jerry

---

那么 viewport meta 标签是解决这个问题的正确方法吗？我尝试了 <meta name="viewport" content="width=1024, initial-scale=1">，但似乎也没有产生任何影响。 - Zach Lysobey

Answer 4

摆脱 width=1024，只需输入

即可。

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

另外，清除您手机浏览器的缓存。可能还需要关闭并重新启动浏览器。

- Web Guy

---

那个代码看起来与我在问题中提供的无法正常工作的代码非常相似。除非“.0”有什么作用...... <meta name="viewport" content="width=device-width, initial-scale=1.0"> - Zach Lysobey