我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
受@jirikuchta的回答启发,我通过添加以下CSS解决了这个问题:
#myTextArea:active {
font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}
没有JS,我没有注意到任何闪光或任何东西。
值得注意的是,最大比例为1的视口也可以工作,但当页面作为iframe加载时,或者如果您有其他脚本修改视口等,则无法工作。
其他回答
我看到这里的人用JavaScript或viewport函数做了一些奇怪的事情,并关闭了所有设备上的手动缩放。我认为这不应该是一个解决方案。添加此CSS片段将关闭iOS中的自动缩放功能,而不会将字体大小更改为固定数字,如16px。
默认情况下,我在输入字段中使用93.8%(15px)的字体大小,通过添加CSS代码段,字体大小保持在93.8%。无需更改为16px或将其设置为固定数字。
input[type="text"]:focus,
textarea:focus {
-webkit-text-size-adjust: 100%;
}
顺便说一下,如果您使用Bootstrap,您可以只使用此变体:
.form-control {
font-size: 16px;
}
input[type='text'],textarea {font-size:1em;}
如果你的网站是为移动设备设计的,你可以决定不允许扩展。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
这解决了移动页面或表单“浮动”的问题。
将用户scalable=0添加到视区元,如下所示
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
为我工作:)
推荐文章
- 样式化HTML电子邮件的最佳实践
- CSS/HTML:什么是使文本斜体的正确方法?
- 使用jQuery改变输入字段的类型
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- CSS div元素-如何显示水平滚动条只?
- 如何修复UITableView分隔符在iOS 7?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- 复选框输入是否只在被选中时才发布数据?
- 是类型="文本/css"必须在<链接>标签?
- 如何将LaTeX与Markdown混合?
- 如何使<div>总是全屏?
- 在Swift中根据字符串计算UILabel的大小