我制作了一个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并不总是捕捉入口/出口,但它在我的测试中运行良好,是一个坚实的开始。
其他回答
如果你的网站是为移动设备设计的,你可以决定不允许扩展。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
这解决了移动页面或表单“浮动”的问题。
我不得不“修复”一个荷兰大学网站的表单控件自动缩放问题(表单控件中使用了15px)。我提出了以下一组要求:
用户必须仍然能够放大字体大小必须保持不变没有暂时不同风格的闪光无jQuery要求必须在最新的iOS上运行,不得妨碍任何其他OS/设备组合如果可能,没有魔法超时,如果需要,正确清除计时器
这是我到目前为止想到的:
/*
NOTE: This code overrides the viewport settings, an improvement would be
to take the original value and only add or change the user-scalable value
*/
// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
preventZoomOnFocus();
function preventZoomOnFocus()
{
document.documentElement.addEventListener("touchstart", onTouchStart);
document.documentElement.addEventListener("focusin", onFocusIn);
}
let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];
function onTouchStart(evt)
{
let tn = evt.target.tagName;
// No need to do anything if the initial target isn't a known element
// which will cause a zoom upon receiving focus
if ( tn != "SELECT"
&& tn != "TEXTAREA"
&& (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
)
return;
// disable zoom
setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}
// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
// reenable zoom
setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}
// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
if (vpnode)
vpnode.setAttribute("content",newvalue);
else
{
vpnode = document.createElement("meta");
vpnode.setAttribute("name", "viewport");
vpnode.setAttribute("content", newvalue);
}
}
一些注意事项:
注意,到目前为止,我只在iOS 11.3.1上测试了它,但很快将在其他几个版本上测试它focusIn事件的使用意味着它至少需要iOS 5.1(但我认为我们在早于9的iOS版本中创建的网站是一个很酷的奖励)使用事件委派,因为我工作的许多站点都有可能动态创建表单控件的页面将eventListeners设置为html元素(documentElement),这样就不必等待body变为可用(不需要检查文档是否已就绪/已加载状态或需要等待DOMContentLoaded事件)
总之,答案是:将表单元素的字体大小设置为至少16px
这是工作!!!我完成了我的搜索旅程!
<meta name=“viewport”content=“width=640px,初始比例=.5,最大比例=.5”/>
在iPhone OS6、Android 2.3.3模拟器上测试
我有一个固定宽度为640px的移动网站,我面对的是自动变焦对焦。
我试着分配一些荡妇,但没有一个能同时在iPhone和Android上运行!
现在对我来说,禁用缩放是可以的,因为网站是移动第一设计!
这是我找到它的地方:如何调整视口大小和缩放以支持跨浏览器?
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自动”。你可能需要,也可能不需要,但为了完整起见,我将其包括在内。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 如何在iOS中使用Swift编程segue
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?