我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
在阅读了这里的几乎每一行并测试了各种解决方案之后,感谢所有分享他们解决方案的人,我在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;}
}
不过,它也有一些缺点,由于“悬停”状态和“聚焦”状态之间字体大小的快速变化,以及重画对性能的影响,它明显出现了“跳跃”
其他回答
input[type='text'],textarea {font-size:1em;}
在阅读了这里的几乎每一行并测试了各种解决方案之后,感谢所有分享他们解决方案的人,我在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;}
}
不过,它也有一些缺点,由于“悬停”状态和“聚焦”状态之间字体大小的快速变化,以及重画对性能的影响,它明显出现了“跳跃”
我用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的字体大小破坏了设计,则可能需要调整界面中的其他一些元素。
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:11自动”。你可能需要,也可能不需要,但为了完整起见,我将其包括在内。
将用户scalable=0添加到视区元,如下所示
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
为我工作:)
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 如何在iOS中使用Swift编程segue
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?