我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
我找不到干净的方法,但这里有一个黑客。。。
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" />');
}
这绝对是一个黑客。。。在某些情况下,mouseover/down并不总是捕捉入口/出口,但它在我的测试中运行良好,是一个坚实的开始。
其他回答
不用简单地将字体大小设置为16px,您可以:
设置输入字段的样式,使其大于预期大小,允许将逻辑字体大小设置为16px。使用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%;
}
输入字段的逻辑字体大小为16px,而文本大小为12px。
我有一篇博客文章,在这里我将稍微详细介绍一下,并将此示例作为可查看的HTML:iPhone上Safari无输入缩放,像素完美方式
这是工作!!!我完成了我的搜索旅程!
<meta name=“viewport”content=“width=640px,初始比例=.5,最大比例=.5”/>
在iPhone OS6、Android 2.3.3模拟器上测试
我有一个固定宽度为640px的移动网站,我面对的是自动变焦对焦。
我试着分配一些荡妇,但没有一个能同时在iPhone和Android上运行!
现在对我来说,禁用缩放是可以的,因为网站是移动第一设计!
这是我找到它的地方:如何调整视口大小和缩放以支持跨浏览器?
请不要使用Javascript或黑客来使其工作。这将影响您在网络上的项目分数。
这将起到作用:
input, input:active, input:focus, input:focus-within, input:hover, input:visited {
font-size: 16px!important;
}
伪元素如:focus不再像以前那样工作。从iOS 11,可以在主样式之前添加一个简单的重置声明(前提是不要用较小的字体大小覆盖它们)。
/* Prevent zoom */
select, input, textarea {
font-size: 16px;
}
值得一提的是,对于Tachyons.CSS这样的CSS库,很容易意外覆盖字体大小。
例如,class:f5相当于:fontSize:1rem,如果您将主体字体比例保持为默认值,则可以使用。
但是:如果您选择字体大小class:f6,则在向上的小屏幕上,这将相当于fontSize:.875rem。在这种情况下,您需要更具体地说明重置声明:
/* Prevent zoom */
select, input, textarea {
font-size: 16px!important;
}
@media screen and (min-width: 30em) {
/* not small */
}
input[type='text'],textarea {font-size:1em;}
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 如何为TableView创建NSIndexPath
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 如何比较两个nsdate:哪个是最近的?
- 在一个CSS宽度的小数点后的位置是尊重?
- 使UINavigationBar透明
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?
- 反应:为什么当道具改变时子组件不更新
- 我怎么能检查html元素,从DOM消失失去焦点?