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

Posted 2023-03-31

【中文标题】如何强制网站扩展以修复移动设备（Iphone android ..）

【英文标题】：How can I force a site to scale to fix for mobile (Iphone android..)

【发布时间】：2011-11-16 15:50:53

【问题描述】：

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

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

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

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

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

【问题讨论】：

我一直在用iphonetester.com测试...

不是“让用户放大才能阅读文本”是指“让用户不必放大才能阅读文本”吗？

@Doug：不。我希望（编辑）在手机上呈现的页面完全缩小，因此其完整的 1024px 宽度将在屏幕上显示而无需滚动。这个网站不是为了响应或以其他方式聪明。也许并不理想，但这使得网站在手机上看起来很有吸引力，所有主要组件都在视图中。用户非常擅长缩放，所以我让他们。

【参考方案1】：

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

您似乎应该忽略大多数视口属性，只需将 user-scalable 设置为“yes”。它现在可以在我的 iPhone 上运行。

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

编辑:: 移动测试站点不允许缩放，所以它只提供滚动条。使用实际的电话可以。

【参考方案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 就是一个例子。

【讨论】：

我同意这是解决问题的最佳方法，但我不准备为移动设备创建一套全新的样式。我知道我在手机上看到过没有特定于移动设备的 css 的页面，它们在移动设备上显示整个页面宽度（缩小）。另外，这种方法是否可行，所以我必须为所有标题和任何其他宽图形创建更小的图像？

【参考方案3】：

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

【讨论】：

那么视口元标记是解决这个问题的正确方法吗？我试过<meta name="viewport" content="width=1024, initial-scale=1">，但这似乎也没有任何影响。

【参考方案4】：

去掉width=1024，直接放进去

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

并且，清除手机的浏览器缓存。之后甚至可能需要关闭并重新打开。

【讨论】：

这看起来与我在not 工作的问题中输入的代码非常相似。除非.0 做某事......<meta name="viewport" content="width=device-width, initial-scale=1.0">