我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
根据斯蒂芬·沃尔什的回答。。。这段代码在不改变焦点输入的字体大小的情况下工作(看起来很蹩脚),而且它仍然适用于FastClick,我建议将其添加到所有移动网站,以帮助实现“快速”。调整“视口宽度”以满足您的需要。
// disable autozoom when input is focused
var $viewportMeta = $('head > meta[name="viewport"]');
$('input, select, textarea').bind('touchend', function(event) {
$viewportMeta.attr('content', 'width=640, user-scalable=0');
setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
});
其他回答
正在iOS 7上运行的Javascript黑客。这是基于@dlo的回答,但mouseover和mouseout事件被touchstart和touchend事件替换。基本上,该脚本在再次启用缩放之前添加半秒超时,以防止缩放。
$("input[type=text], textarea").on({ 'touchstart' : function() {
zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
setTimeout(zoomEnable, 500);
}});
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
}
请不要使用Javascript或黑客来使其工作。这将影响您在网络上的项目分数。
这将起到作用:
input, input:active, input:focus, input:focus-within, input:hover, input:visited {
font-size: 16px!important;
}
下面是我在一个项目中使用的黑客:
select {
font-size: 2.6rem; // 1rem = 10px
...
transform-origin: ... ...;
transform: scale(0.5) ...;
}
最终得到了我想要的初始样式和比例,但没有缩放焦点。
我不得不“修复”一个荷兰大学网站的表单控件自动缩放问题(表单控件中使用了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事件)
这是工作!!!我完成了我的搜索旅程!
<meta name=“viewport”content=“width=640px,初始比例=.5,最大比例=.5”/>
在iPhone OS6、Android 2.3.3模拟器上测试
我有一个固定宽度为640px的移动网站,我面对的是自动变焦对焦。
我试着分配一些荡妇,但没有一个能同时在iPhone和Android上运行!
现在对我来说,禁用缩放是可以的,因为网站是移动第一设计!
这是我找到它的地方:如何调整视口大小和缩放以支持跨浏览器?
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 如何在iOS中使用Swift编程segue
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?