HTML/CSS - 移动端在开始时放大答案

【问题标题】：HTML/CSS - Mobile zoomed at startHTML/CSS - 移动端在开始时放大
【发布时间】：2012-01-23 15:59:42
【问题描述】：

存在所有移动设备在开始时都放大 50% 的问题。那是除 iPad 之外的所有设备。尝试进行 PHP 检查以缩小 50%（如果 iPad 除外），但是当您从横向 -> 纵向 -> 横向移动时，它会再次缩小 50%。

这是我当前的元标记：

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=640, height=700, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

我的 HTML 不使用任何宽度 100% 仅以 px 为单位。总体而言，内容不会扩展 640 宽度和 700 高度。

有人知道如何避免这个问题吗？

编辑

得出的结论是@hakre 关于像素的比例是正确的。我的解决方法是将每个宽度设置为 % 而不是 px。这样，无论如何它都会自动调整大小。需要注意的一件事是我删除了秤。原因是它似乎弄乱了某些设备上的布局。再次感谢@hakre

【问题讨论】：

这里有一些答案元素：stackoverflow.com/questions/4472891/…
是的，本来想说<meta content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" /><meta content="width=device-width" name="viewport" />，但你的链接有这个
不，这不是答案。然后你只是不允许用户缩放页面。但是，由于我建筑物中的每个设备都会自动设置比例，而无需任何用户交互，这不是解决方案。感谢您的尝试:)

标签： php html css mobile

【解决方案1】：

我只在 Android 的默认浏览器和 Opera Mobile 上对此进行了测试，但它似乎运行良好。不幸的是，仍然无法禁用 Android 浏览器的缩放功能...

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<meta name="viewport" content="target-densitydpi=device-dpi" /> 
<meta name="HandheldFriendly" content="true"/>

【讨论】：

【解决方案2】：

在 CSS 中，px 是 absolute length unit。它们主要在输出环境已知时有用。

对于 CSS 设备，这些尺寸要么通过 (i) 将物理单位 [in, cm, mm, pt, pc] 与其物理测量值相关联来锚定，要么(ii) 通过将像素单位 [ px] 到 参考像素。 [我的补充和亮点]

如果参考像素是设备显示屏物理像素的一半，则 700 像素的 CSS 值将在显示屏上转换为 350 像素 - 或您问题中所说的 50%。

所以你在这里的体验是完全正确的，在你选择pxunits 的意义上，CSS 是正确的，你只是错过了 CSS 中的 px 与显示器上的像素不同。因为它不是但你希望它是，看起来你选择了错误的单位。

再次重申：绝对长度单位主要在输出环境已知时有用。

也许你找到了一种方法来告诉浏览器修改那个参考像素？这将解决您的问题。或者现在您知道会发生什么，检测设备并相应地更改长度。

作为替代方案，您可以将绝对长度替换为相对长度（em、ex）。由于它们是相对的，因此您只需更改它们相对的元素的长度即可更改整个页面。

这通常通过在 <html> 和/或 <body> 元素上使用绝对长度以及对其他所有元素使用相对长度来完成。

这种方法也可以帮助您解决问题。

【讨论】：

不，这不是问题所在。问题是移动浏览器加载时会放大 50%。然后您可以缩小，但元素的宽度/高度是完全正确的。一个可能的解决方案是首先缩小或根本不放大。感谢您的写作，但我已经知道 :) 我的问题只是它似乎在加载时处于缩放状态。元素的显示是正确的。
只是另一个输入。已经为所有元素设置了宽度，并且没有一个扩展这个宽度。再次感谢您试一试。
zoom 在您的情况下是 CSS 属性吗？如果是这样，您可以粘贴它的客户端样式表吗？另外你知道CSS Device Adaptation吗？您可能需要为此使用供应商特定的模块，它仍然是一个草稿。
我根本不使用 css 中的 zoom 属性。还尝试了那些视口属性，但没有运气。不管我做什么，一开始视口总是放大 50%。由于最大比例为 1.0 并且我一开始可以缩小，因此初始比例属性似乎运行不正确。如果它从一开始就设置为 1.0 并且用户应该从一开始查看 1 -> 1 像素，他/她应该无法缩小。但正如他/她那样，这意味着初始规模未设置或正在窃听。知道它可能是什么吗？
我不是说你使用缩放属性而是浏览器，这就是为什么我要求客户端 CSS（不是用户或作者 CSS）。因此，如果您可以在该平台上为您的页面显示初始 CSS 规则，这将是一件好事。目前手头没有android，如果你知道我可以在我的windows box上运行的官方android模拟器，给我一个链接，我可以看看。