当 iPhone 方向从纵向变为横向时保留 HTML 字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2710764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preserve HTML font-size when iPhone orientation changes from portrait to landscape
提问by DShultz
I have a mobile web application with an unordered list containing multiple listitems with a hyperlink inside of each li:
我有一个移动 Web 应用程序，其中包含一个无序列表，其中包含多个列表项，每个 li 内有一个超链接：
...My question is how can I format the hyperlinks so that they DON'T change size when viewed on an iPhone, and the accellerometer switches from portrait -> landscape? Right now, I have the hyperlink font size spec'ed to 14px, but when switching to landscape, it blows way up to like 20px. I want the font-size to stay the same. Here is the code:
...我的问题是如何格式化超链接，以便在 iPhone 上查看时它们不会改变大小，并且加速度计从纵向 - > 横向切换？现在，我将超链接字体大小指定为 14 像素，但是当切换到横向时，它会上升到 20 像素。我希望字体大小保持不变。这是代码：
ul li a
{
font-size:14px;
text-decoration: none;
color: #cc9999;
}<ul>
<li id="home" class="active">
<a href="home.html">HOME</a>
</li>
<li id="home" class="active">
<a href="test.html">TEST</a>
</li>
</ul>回答by Matt Stevens
You can disable this behavior through the -webkit-text-size-adjustCSS property:
您可以通过-webkit-text-size-adjustCSS 属性禁用此行为：
html {
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
The use of this property is described further in the Safari Web Content Guide.
Safari Web 内容指南中进一步描述了此属性的使用。
回答by crazygringo
Note: if you use
注意：如果你使用
html {
-webkit-text-size-adjust: none;
}
then this will disable zoom behavior in default browsers. A better solution is:
那么这将禁用默认浏览器中的缩放行为。更好的解决方案是：
html {
-webkit-text-size-adjust: 100%;
}
This corrects the iPhone/iPad behavior, without changing desktop behavior.
这会纠正 iPhone/iPad 行为，而不会改变桌面行为。
回答by snobojohan
Using -webkit-text-size-adjust: none; directly on html breaks the ability to zoom text in all webkit browsers. You should combine this with som media queries specific for iOS. For example:
使用 -webkit-text-size-adjust: none; 直接在 html 上破坏了在所有 webkit 浏览器中缩放文本的能力。您应该将其与特定于 iOS 的一些媒体查询结合起来。例如：
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
html {
-webkit-text-size-adjust: none;
}
}
回答by Dan
As it was mentioned before, CSS rule
正如之前提到的，CSS 规则
-webkit-text-size-adjust: none
does no longer work in modern devices.
不再适用于现代设备。
Fortunately, a new solution comes for iOS5 and iOS6 (todo: what about iOS7?):
幸运的是，iOS5 和 iOS6 有了新的解决方案（待办事项：iOS7 怎么样？）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
You can also add , user-scalable=0to turn off pinch zooming, so your website would behave like a native app. If your design brakes when user zooms, use this meta tag instead:
您还可以添加, user-scalable=0以关闭捏合缩放，这样您的网站就会像本机应用程序一样运行。如果您的设计在用户缩放时停止，请改用此元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
回答by Guillaume
You can add a meta in the HTML header:
您可以在 HTML 标头中添加元数据：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
回答by Manu
You could also opt for using a CSS reset, such as normalize.css, which includes the same rule that crazygringo recommends:
您还可以选择使用 CSS 重置，例如normalize.css，其中包含与 crazygringo 推荐的规则相同的规则：
/**
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
As you see, it also includes a vendor specific rule for the IE Phone.
如您所见，它还包括针对 IE Phone 的供应商特定规则。
For current information about the implementation in different browsers, refer to the MDN reference page.
有关在不同浏览器中实现的最新信息，请参阅MDN 参考页面。
回答by Aman
The below code works for me.
下面的代码对我有用。
html{-webkit-text-size-adjust: 100%;}
Try with clearing your browser cache if it does not work.
如果它不起作用，请尝试清除浏览器缓存。
回答by Radek Matěj
As of March 2019 text-size-adjusthas a reasonable support amongst mobile browsers.
截至 2019 年 3 月，文本大小调整已在移动浏览器中获得合理支持。
body {
text-size-adjust: none;
}
Using viewportmeta tag has no effect on the text size adjustment and setting user-scalable: nodoes not even work in IOS Safari.
使用viewport元标记对文字大小调整没有影响，设置user-scalable: no在 IOS Safari 中甚至不起作用。
回答by Belyash
In my case this trouble has been because I used CSS attribute width: 100%for HTML tag input type="text".
就我而言，这个麻烦是因为我使用width: 100%了 HTML 标签的CSS 属性input type="text"。
I changed value of widthto 60% and add padding-right:38%.
我将 的值更改width为 60% 并添加padding-right:38%.
input {
padding-right: 38%;
width: 60%;
}
