我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
下面是我在一个项目中使用的黑客:
select {
font-size: 2.6rem; // 1rem = 10px
...
transform-origin: ... ...;
transform: scale(0.5) ...;
}
最终得到了我想要的初始样式和比例,但没有缩放焦点。
其他回答
@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没有在选择上添加背景。
我用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的字体大小破坏了设计,则可能需要调整界面中的其他一些元素。
我使用了上面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;
}
}
我尝试使用.formcontrol:focu,它将其保持在14px,但focus将其更改为16px,它没有解决iOS8的缩放问题。至少在我使用iOS8的iPhone上,字体大小必须是16px才能对焦,这样iPhone才能不缩放页面。
input[type='text'],textarea {font-size:1em;}
受@jirikuchta的回答启发,我通过添加以下CSS解决了这个问题:
#myTextArea:active {
font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}
没有JS,我没有注意到任何闪光或任何东西。
值得注意的是,最大比例为1的视口也可以工作,但当页面作为iframe加载时,或者如果您有其他脚本修改视口等,则无法工作。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 如何在iOS中使用Swift编程segue
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?