我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
这个问题的简单解决方案是:
@media screen and (max-width: 599px) {
input, select, textarea {
font-size: 16px;
}
}
注:最大宽度可根据您的要求定制。
其他回答
如果你的网站是为移动设备设计的,你可以决定不允许扩展。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
这解决了移动页面或表单“浮动”的问题。
我找不到干净的方法,但这里有一个黑客。。。
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并不总是捕捉入口/出口,但它在我的测试中运行良好,是一个坚实的开始。
经过一段时间的尝试,我想出了这个解决方案
// 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。这将阻止缩放。在焦点事件中,它将字体大小更改回初始值。
与之前发布的解决方案不同,这将允许您将输入的字体大小设置为任意大小。
不用简单地将字体大小设置为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无输入缩放,像素完美方式
使用(悬停:无)和(指针:粗略)以所有触摸屏设备为目标:
这里的许多答案都依赖于部署JavaScript或jQuery。
但它应该(而且是)完全可以用CSS控制条件字体表示等问题。
Safari Mobile要求(有充分的理由)与任何表单元素交互时,其最小字体大小必须为16px(或视觉等效值)。
让我们致力于让经过深思熟虑的用户体验应用于所有触摸屏浏览器。
然后我们可以采取以下措施:
@media only screen and (hover: none) and (pointer: coarse) {
input,
select,
textarea {
font-size: 11px;
}
input:focus,
select:focus,
textarea:focus {
font-size: 16px;
}
}
结果
当使用触摸屏设备时,当上面的任何交互式表单元素被聚焦时,该表单元素的字体大小被临时设置为16px。
这反过来会禁用iOS Safari Mobile自动缩放。
用户初始化的捏缩缩放在所有设备上都不受影响,并且永远不会被禁用。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 如何在iOS中使用Swift编程segue
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?