我制作了一个带有<input>
标签的 HTML 页面type="text"
。当我在 iPhone 上使用 Safari 单击它时,页面会变大(自动缩放)。有人知道如何禁用它吗?
37 回答
您可以防止 Safari 在用户输入期间自动放大文本字段,而不会禁用用户捏合缩放的能力。只需添加maximum-scale=1
但省略其他答案中建议的用户规模属性。
如果您的图层中有一个表单在缩放时会“浮动”,这是一个值得选择的选择,这可能会导致重要的 UI 元素移出屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
如果字体大小小于16px
并且表单元素的默认字体大小是11px
(至少在 Chrome 和 Safari 中),浏览器将缩放。
此外,select
元素需要附加focus
伪类。
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
font-size: 16px;
}
没有必要使用以上所有内容,您可以只设置您需要的元素的样式,例如:just text
, number
, and textarea
:
input[type='text'],
input[type='number'],
textarea {
font-size: 16px;
}
让输入元素从父样式继承的替代解决方案:
body {
font-size: 16px;
}
input[type="text"] {
font-size: inherit;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
background: #eee;
}
}
新:IOS 仍然会缩放,除非您在没有焦点的输入上使用 16px。
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
我添加了背景,因为 IOS 在选择时没有添加背景。
如果您的网站是为移动设备正确设计的,您可以决定不允许扩展。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
这解决了您的移动页面或表单将“浮动”的问题。
总而言之,答案是:将表单元素的字体大小设置为至少 16px
解决此问题的正确方法是将元视口更改为:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
重要提示:不要设置minimum-scale
!这使页面可以手动缩放。
input[type='text'],textarea {font-size:1em;}
正如许多其他答案已经指出的那样,这可以通过添加maximum-scale
到元viewport
标记来实现。但是,这会导致在 Android 设备上禁用用户缩放功能。(自 v10 以来,它不会禁用 iOS 设备上的用户缩放。)
当设备是 iOS 时,我们可以使用 JavaScript 动态添加maximum-scale
到元数据中。viewport
这实现了两全其美:我们允许用户缩放并防止 iOS 放大焦点上的文本字段。
| maximum-scale | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes | yes | yes | no |
| no | yes | no | yes |
| yes on iOS, no on Android | yes | yes | yes |
代码:
const addMaximumScaleToMetaViewport = () => {
const el = document.querySelector('meta[name=viewport]');
if (el !== null) {
let content = el.getAttribute('content');
let re = /maximum\-scale=[0-9\.]+/g;
if (re.test(content)) {
content = content.replace(re, 'maximum-scale=1.0');
} else {
content = [content, 'maximum-scale=1.0'].join(', ')
}
el.setAttribute('content', content);
}
};
const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (checkIsIOS()) {
disableIosTextFieldZoom();
}
我找不到干净的方法,但这里有一个黑客......
1)我注意到 mouseover 事件发生在缩放之前,但缩放发生在 mousedown 或 focus 事件之前。
2) 您可以使用 javascript 动态更改 META 视口标记(请参阅使用 Javascript在 iPhone safari 上启用/禁用缩放?)
所以,试试这个(在 jquery 中显示的紧凑性):
$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
这绝对是一个 hack……在某些情况下,鼠标悬停/向下并不总是捕捉到条目/退出,但它在我的测试中运行良好并且是一个可靠的开始。
我最近(今天:D)不得不整合这种行为。为了不影响包括组合在内的原始设计领域,我选择在该领域的焦点应用转换:
input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
font-size: 16px;
}
除了简单地将字体大小设置为 16px,您还可以:
- 设置输入字段的样式,使其大于预期大小,允许将逻辑字体大小设置为 16 像素。
- 使用
scale()
CSS 变换和负边距将输入字段缩小到正确的大小。
例如,假设您的输入字段最初的样式为:
input[type="text"] {
border-radius: 5px;
font-size: 12px;
line-height: 20px;
padding: 5px;
width: 100%;
}
如果通过将所有尺寸增加 16 / 12 = 133.33% 来扩大字段,然后将使用减少scale()
12 / 16 = 75%,则输入字段将具有正确的视觉大小(和字体大小),并且不会放大重点。
由于scale()
仅影响视觉大小,您还需要添加负边距以减小字段的逻辑大小。
使用这个 CSS:
input[type="text"] {
/* enlarge by 16/12 = 133.33% */
border-radius: 6.666666667px;
font-size: 16px;
line-height: 26.666666667px;
padding: 6.666666667px;
width: 133.333333333%;
/* scale down by 12/16 = 75% */
transform: scale(0.75);
transform-origin: left top;
/* remove extra white space */
margin-bottom: -10px;
margin-right: -33.333333333%;
}
输入字段的逻辑字体大小为 16 像素,而文本显示为 12 像素。
我有一篇博客文章,其中我会稍微详细一点,并将这个示例作为可查看的 HTML:
iPhone 上的 Safari 中没有输入缩放,像素完美的方式
将user-scalable=0添加到视口元,如下所示
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
为我工作:)
受@jirikuchta 回答的启发,我通过添加以下 CSS 解决了这个问题:
#myTextArea:active {
font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}
没有 JS,我也没有注意到任何闪光或任何东西。
值得注意的是 a viewport
withmaximum-scale=1
也有效,但当页面作为 iframe 加载时,或者如果您有其他脚本修改viewport
等时无效。
这在 iOS Safari 和 Chrome 上对我有用。对于输入选择器,可以设置 class 或 id 以包含当前。
@supports (-webkit-overflow-scrolling: touch) {
input {
font-size: 16px;
}
}
在 iOS 7 上运行的 Javascript hack。这是基于 @dlo 的回答,但是 mouseover 和 mouseout 事件被 touchstart 和 touchend 事件所取代。基本上,此脚本会在再次启用缩放之前添加半秒超时以防止缩放。
$("input[type=text], textarea").on({ 'touchstart' : function() {
zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
setTimeout(zoomEnable, 500);
}});
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
}
我在上面使用了 Christina 的解决方案,但对引导程序和另一条规则进行了小修改,以适用于台式计算机。Bootstrap 的默认字体大小是 14px,这会导致缩放。以下将 Bootstrap 中的“表单控件”更改为 16px,以防止缩放。
@media screen and (-webkit-min-device-pixel-ratio:0) {
.form-control {
font-size: 16px;
}
}
对于非移动浏览器,返回 14px。
@media (min-width: 768px) {
.form-control {
font-size: 14px;
}
}
我尝试使用 .form-control:focus,将其保留为 14 像素,但焦点将其更改为 16 像素,但它没有解决 iOS8 的缩放问题。至少在我使用 iOS8 的 iPhone 上,字体大小必须在焦点之前为 16 像素,以便 iPhone 不会缩放页面。
这对我有用:
input, textarea {
font-size: initial;
}
我这样做了,也使用 jQuery:
$('input[type=search]').on('focus', function(){
// replace CSS font-size with 16px to disable auto zoom on iOS
$(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
// put back the CSS font-size
$(this).css('font-size', $(this).data('fontSize'));
});
当然,如果此16px
字体大小破坏了设计,则可能必须调整界面中的其他一些元素。
:focus
像以前那样的伪元素不再起作用。从 iOS 11 开始,可以在您的主要样式之前添加一个简单的重置声明(前提是您不使用较小的字体大小覆盖它们)。
/* Prevent zoom */
select, input, textarea {
font-size: 16px;
}
值得一提的是,对于诸如 Tachyons.css 之类的 CSS 库,很容易意外地覆盖您的字体大小。
例如 class:f5
等效于: fontSize: 1rem
,如果您将正文字体比例保持为默认值,这很好。
但是:如果您选择字体大小类:f6
这将相当于fontSize: .875rem
在一个小显示器上向上。在这种情况下,您需要更具体地说明您的重置声明:
/* Prevent zoom */
select, input, textarea {
font-size: 16px!important;
}
@media screen and (min-width: 30em) {
/* not small */
}
经过一段时间的尝试,我想出了这个解决方案
// set font-size to 16px to prevent zoom
input.addEventListener("mousedown", function (e) {
e.target.style.fontSize = "16px";
});
// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
e.target.style.fontSize = "";
});
在“mousedown”上,它将输入的字体大小设置为 16px。这将防止缩放。在焦点事件中,它会将字体大小更改回初始值。
与之前发布的解决方案不同,这将使您可以将输入的字体大小设置为您想要的任何内容。
在阅读了这里的几乎每一行并测试了各种解决方案之后,感谢所有分享他们的解决方案的人,这是我在 iPhone 7 iOS 10.x 上想出、测试并为我工作的:
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover{font-size: initial;}
}
@media (min-width: 768px) {
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover{font-size: inherit;}
}
但是,它有一些缺点,由于在“悬停”和“聚焦”状态之间发生的快速字体大小变化,以及重绘对性能的影响,导致明显的“跳跃”
我查看了多个答案。\
maximum-scale=1
在标签中设置的答案meta
在 iOS 设备上运行良好,但在 Android 设备上禁用了捏缩放功能。- 带有设置的那个
font-size: 16px;
onfocus
对我来说太hacky了。
所以我写了一个JS函数来动态改变meta
标签。
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS)
document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1, maximum-scale=1";
else
document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1";
我不得不“修复”荷兰大学网站的自动放大表单控件问题(在表单控件中使用 15px)。我提出了以下一组要求:
- 用户必须仍然能够放大
- 字体大小必须保持不变
- 没有临时不同的造型闪烁
- 没有 jQuery 要求
- 必须在最新的 iOS 上工作,并且不妨碍任何其他操作系统/设备组合
- 如果可能没有魔法超时,如果需要正确清除计时器
到目前为止,这是我想出的:
/*
NOTE: This code overrides the viewport settings, an improvement would be
to take the original value and only add or change the user-scalable value
*/
// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
preventZoomOnFocus();
function preventZoomOnFocus()
{
document.documentElement.addEventListener("touchstart", onTouchStart);
document.documentElement.addEventListener("focusin", onFocusIn);
}
let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];
function onTouchStart(evt)
{
let tn = evt.target.tagName;
// No need to do anything if the initial target isn't a known element
// which will cause a zoom upon receiving focus
if ( tn != "SELECT"
&& tn != "TEXTAREA"
&& (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
)
return;
// disable zoom
setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}
// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
// reenable zoom
setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}
// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
if (vpnode)
vpnode.setAttribute("content",newvalue);
else
{
vpnode = document.createElement("meta");
vpnode.setAttribute("name", "viewport");
vpnode.setAttribute("content", newvalue);
}
}
一些注意事项:
- 请注意,到目前为止,我只在 iOS 11.3.1 上对其进行了测试,但很快会在其他几个版本上进行测试
- 使用 focusIn 事件意味着它至少需要 iOS 5.1(但我认为我们构建的网站在 iOS 9 之前的版本中运行是一个很酷的奖励)
- 使用事件委托,因为我工作的很多网站都有可能动态创建表单控件的页面
- 将 eventListeners 设置为 html 元素 (documentElement),以便不必等待 body 可用(不想费心检查文档是否已就绪/已加载状态或需要等待 DOMContentLoaded 事件)
即使有了这些答案,我也花了三天时间才弄清楚发生了什么,将来我可能再次需要解决方案。
我的情况与描述的情况略有不同。
在我的页面中,我在 div 中有一些内容可编辑的文本。当用户单击不同的 div 时,我自动选择了 contenteditable div 中的一些文本(先前已保存并清除的选择范围),在该选择上运行富文本 execCommand,然后再次清除它。
这使我能够根据用户与页面上其他地方的颜色 div 的交互来无形地更改文本颜色,同时保持选择通常隐藏以让他们在适当的上下文中看到颜色。
好吧,在 iPad 的 Safari 上,单击颜色 div 会导致屏幕键盘出现,而我所做的一切都无法阻止它。
我终于弄清楚了 iPad 是如何做到这一点的。
它侦听触发选择可编辑文本的 touchstart 和 touchend 序列。
当这种组合发生时,它会显示屏幕键盘。
实际上,它会在放大可编辑文本的同时扩展底层页面。我花了一天的时间才明白我所看到的。
所以我使用的解决方案是在那些特定的颜色 div 上拦截 touchstart 和 touchend 。在这两个处理程序中,我停止传播和冒泡并返回 false。但是在 touchend 事件中,我触发了与单击触发相同的行为。
因此,在此之前,Safari 会触发我认为的“touchstart”、“mousedown”、“touchend”、“mouseup”、“click”,并且由于我的代码,按此顺序进行了文本选择。
由于截距的新序列只是文本选择。在 Safari 处理它并执行它的键盘操作之前,其他所有内容都会被拦截。touchstart 和 touchend 拦截也阻止了鼠标事件的触发,在上下文中这完全没问题。
我不知道用更简单的方法来描述这个问题,但我认为把它放在这里很重要,因为我在第一次遇到这个问题后的一个小时内就找到了这个帖子。
我 98% 确定相同的修复程序适用于输入框和其他任何东西。拦截触摸事件并单独处理它们,不要让它们传播或冒泡,并考虑在短暂的超时后进行任何选择,以确保 Safari 不会将序列识别为键盘触发器。
2021解决方案...
好的,我已经阅读了所有旧答案,但没有一个对我有用。经过数小时尝试不同的事情后,最终解决方案似乎很简单。
input{
transform: scale(0.875);
transform-origin: left center;
margin-right: -14.28%;
}
在 PC 上的 iOS/Android/Chrome 上测试
这允许您使用 14px 字体,如果您需要不同的大小,则缩放因子为 14/16 = 0.875,负边距为 (1 - 0.875) / 0.875 * 100
我的输入有一个父级设置为“display:flex”,它增长到适合父级,因为它有“flex:1 1 auto”。您可能需要也可能不需要这个,但为了完整起见,我将其包括在内。
我看到这里的人们使用 JavaScript 或视口功能做了一些奇怪的事情,并关闭了设备上的所有手动缩放功能。在我看来,这不应该是一个解决方案。添加此 CSS 片段将关闭 iOS 中的自动缩放,而无需将字体大小更改为固定数字,例如 16px。
默认情况下,我在输入字段中使用 93.8% (15px) 的字体大小,并通过添加我的 CSS 片段保持在 93.8%。无需更改为 16px 或使其成为固定数字。
input[type="text"]:focus,
textarea:focus {
-webkit-text-size-adjust: 100%;
}
将字体大小(用于输入字段)设置为等于正文的字体大小,似乎是阻止浏览器缩小或缩小的原因。我建议将font-size: 1rem
其用作更优雅的解决方案。
基于斯蒂芬沃尔什的回答...此代码可以在不更改焦点输入的字体大小(看起来很蹩脚)的情况下工作,而且它仍然适用于FastClick,我建议将其添加到所有移动网站以帮助带来“活泼”。调整您的“视口宽度”以满足您的需要。
// disable autozoom when input is focused
var $viewportMeta = $('head > meta[name="viewport"]');
$('input, select, textarea').bind('touchend', function(event) {
$viewportMeta.attr('content', 'width=640, user-scalable=0');
setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
});
顺便说一句,如果你使用Bootstrap,你可以只使用这个变体:
.form-control {
font-size: 16px;
}
在 Angular 中,您可以使用指令来防止对 IOS 设备的焦点进行缩放。没有元标记来保持可访问性。
import { Directive, ElementRef, HostListener } from '@angular/core';
const MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX = 16;
@Directive({ selector: '[noZoomiOS]' })
export class NoZoomiOSDirective {
constructor(private el: ElementRef) {}
@HostListener('focus')
onFocus() {
this.setFontSize('');
}
@HostListener('mousedown')
onMouseDown() {
this.setFontSize(`${MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX}px`);
}
private setFontSize(size: string) {
const { fontSize: currentInputFontSize } = window.getComputedStyle(this.el.nativeElement, null);
if (MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX <= +currentInputFontSize.match(/\d+/)) {
return;
}
const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
iOS
&& (this.el.nativeElement.style.fontSize = size);
}
}
<input noZoomiOS >
在你声明它之后,你可以像这样使用它*.module.ts
由于自动放大(没有缩小)在 iPhone 上仍然很烦人,这是一个基于 dlo 建议使用焦点/模糊的 JavaScript。
一旦文本输入被 fucused 并在输入离开时重新启用,缩放就会被禁用。
注意:有些用户可能不喜欢在小文本输入中编辑文本!因此,我个人更喜欢在编辑过程中更改输入的文本大小(参见下面的代码)。
<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
if (element.addEventListener) {
element.addEventListener(evtId, handler, false);
} else if (element.attachEvent) {
var ieEvtId = "on"+evtId;
element.attachEvent(ieEvtId, handler);
} else {
var legEvtId = "on"+evtId;
element[legEvtId] = handler;
}
}
function onBeforeZoom(evt) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = "user-scalable=0";
}
}
function onAfterZoom(evt) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = "width=device-width, user-scalable=1";
}
}
function disableZoom() {
// Search all relevant input elements and attach zoom-events
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
attachEvent(inputs[i], "focus", onBeforeZoom);
attachEvent(inputs[i], "blur", onAfterZoom);
}
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
attachEvent(window, "load", disableZoom);
}
// -->
</script>
以下代码将在元素获得焦点期间将输入的文本大小更改为 16 像素(计算,即在当前缩放大小下)。因此 iPhone 不会自动放大。
注意:缩放系数是根据 window.innerWidth 和 iPhone 的 320 像素显示计算得出的。这仅对纵向模式下的 iPhone 有效。
<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
if (element.addEventListener) {
element.addEventListener(evtId, handler, false);
} else if (element.attachEvent) {
var ieEvtId = "on"+evtId;
element.attachEvent(ieEvtId, handler);
} else {
var legEvtId = "on"+evtId;
element[legEvtId] = handler;
}
}
function getSender(evt, local) {
if (!evt) {
evt = window.event;
}
var sender;
if (evt.srcElement) {
sender = evt.srcElement;
} else {
sender = local;
}
return sender;
}
function onBeforeZoom(evt) {
var zoom = 320 / window.innerWidth;
var element = getSender(evt);
element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
var element = getSender(evt);
element.style.fontSize = "";
}
function disableZoom() {
// Search all relevant input elements and attach zoom-events
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
attachEvent(inputs[i], "focus", onBeforeZoom);
attachEvent(inputs[i], "blur", onAfterZoom);
}
}
if (navigator.userAgent.match(/iPhone/i)) {
attachEvent(window, "load", disableZoom);
}
// -->
</script>
令人惊讶的是,这里有几十个关于 javascript 和视口的答案,只有一个提到text-size-adjust
我认为是最好的解决方案。
您可以将其设置为none
.
添加以下 CSS:
* {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
我花了一段时间才找到它,但这是我找到的最好的代码...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/
var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
});
关于将 font-size 设置为 16px 的最佳答案的评论询问这是一个解决方案,如果你想要更大/更小的字体怎么办。
我不了解你们所有人,但是使用 px 作为字体大小并不是最好的方法,你应该使用 em。
我在我的文本字段大于 16 像素的响应式网站上遇到了这个问题。我将表单容器设置为 2rem,输入字段设置为 1.4em。在我的移动查询中,我根据视口更改 html 字体大小。由于默认 html 为 10,我的输入字段在桌面上计算为 28px
要删除自动缩放,我必须将输入更改为 1.6em。这将我的字体大小增加到 32px。只是稍微高一点,几乎看不出来。在我的 iPhone 4 和 5 上,我将我的 html 字体大小更改为纵向 15 像素,横向更改回 10 像素。看起来那个像素大小的最佳位置是 48 像素,这就是我从 1.4em (42px) 改为 1.6em (48px) 的原因。
您需要做的是找到字体大小的最佳位置,然后将其反向转换为您的 rem/em 大小。
这是我在一个项目中使用的 hack:
select {
font-size: 2.6rem; // 1rem = 10px
...
transform-origin: ... ...;
transform: scale(0.5) ...;
}
最终得到了我想要的初始样式和比例,但没有放大焦点。
请不要使用 Javascript 或 hack 来使其工作。这将影响您在网络上的项目得分。
这可以解决问题:
input, input:active, input:focus, input:focus-within, input:hover, input:visited {
font-size: 16px!important;
}
这是工作!!!我完成了我的搜索之旅!
<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />
在iPhone OS6 , Android 2.3.3 模拟器上测试
我有一个固定宽度为 640 像素的移动网站,我正面临着自动缩放的焦点。
我正在尝试分配各种解决方案,但没有一个在 iPhone 和 Android 上都可以使用!
现在对我来说可以禁用缩放,因为该网站是移动优先设计!
这是我找到它的地方: How to do viewport sizing and scaling for cross browser support?