我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
这是工作!!!我完成了我的搜索旅程!
<meta name=“viewport”content=“width=640px,初始比例=.5,最大比例=.5”/>
在iPhone OS6、Android 2.3.3模拟器上测试
我有一个固定宽度为640px的移动网站,我面对的是自动变焦对焦。
我试着分配一些荡妇,但没有一个能同时在iPhone和Android上运行!
现在对我来说,禁用缩放是可以的,因为网站是移动第一设计!
这是我找到它的地方:如何调整视口大小和缩放以支持跨浏览器?
其他回答
总之,答案是:将表单元素的字体大小设置为至少16px
一条关于将字体大小设置为16px的顶级答案的评论询问了这是如何解决的,如果你想要更大/更小的字体怎么办。
我不知道你们所有人的情况,但使用px来调整字体大小并不是最好的方法,你应该使用它们。
我在我的响应网站上遇到了这个问题,我的文本字段大于16像素。我的表单容器设置为2em,输入字段设置为1.4em。在移动查询中,我根据视口更改html字体大小。由于默认的html是10,我的输入字段在桌面上计算为28px
为了取消自动缩放,我不得不将输入更改为1.6em。这将我的字体大小增加到32px。只是稍微高一点,几乎看不到。在我的iPhone 4和5上,我将html字体大小改为15像素(纵向),改回10像素(横向)。看起来像素大小的最佳点是48px,这就是为什么我从1.4em(42px)改为1.6em(48px)。
你需要做的事情是找到字体大小的最佳位置,然后将其转换为rem/em大小。
正如许多其他答案已经指出的那样,这可以通过向元视口标记添加最大比例来实现。然而,这会导致在Android设备上禁用用户缩放功能。(自v10以来,它不会在iOS设备上禁用用户缩放。)
当设备为iOS时,我们可以使用JavaScript动态地向元视口添加最大比例。这实现了两全其美:我们允许用户缩放,并防止iOS缩放到聚焦的文本字段。
| maximum-scale | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes | yes | yes | no |
| no | yes | no | yes |
| yes on iOS, no on Android | yes | yes | yes |
代码:
const addMaximumScaleToMetaViewport = () => {
const el = document.querySelector('meta[name=viewport]');
if (el !== null) {
let content = el.getAttribute('content');
let re = /maximum\-scale=[0-9\.]+/g;
if (re.test(content)) {
content = content.replace(re, 'maximum-scale=1.0');
} else {
content = [content, 'maximum-scale=1.0'].join(', ')
}
el.setAttribute('content', content);
}
};
const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (checkIsIOS()) {
disableIosTextFieldZoom();
}
根据斯蒂芬·沃尔什的回答。。。这段代码在不改变焦点输入的字体大小的情况下工作(看起来很蹩脚),而且它仍然适用于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)
});
由于iPhone上的自动放大(没有缩小)功能仍在运行,这里有一个基于dlo建议的JavaScript,用于聚焦/模糊。
一旦文本输入被功能化并在输入离开时重新合成,缩放将被禁用。
注意:有些用户可能不欣赏在小文本输入中编辑文本!因此,我个人更喜欢在编辑过程中更改输入的文本大小(参见下面的代码)。
<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
if (element.addEventListener) {
element.addEventListener(evtId, handler, false);
} else if (element.attachEvent) {
var ieEvtId = "on"+evtId;
element.attachEvent(ieEvtId, handler);
} else {
var legEvtId = "on"+evtId;
element[legEvtId] = handler;
}
}
function onBeforeZoom(evt) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = "user-scalable=0";
}
}
function onAfterZoom(evt) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = "width=device-width, user-scalable=1";
}
}
function disableZoom() {
// Search all relevant input elements and attach zoom-events
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
attachEvent(inputs[i], "focus", onBeforeZoom);
attachEvent(inputs[i], "blur", onAfterZoom);
}
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
attachEvent(window, "load", disableZoom);
}
// -->
</script>
以下代码将在元素具有焦点期间将输入的文本大小更改为16像素(即,以当前缩放大小计算)。因此,iPhone不会自动放大。
注:缩放因子是根据window.innerWidth和iPhone的320像素显示屏计算的。这仅对处于肖像模式的iPhone有效。
<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
if (element.addEventListener) {
element.addEventListener(evtId, handler, false);
} else if (element.attachEvent) {
var ieEvtId = "on"+evtId;
element.attachEvent(ieEvtId, handler);
} else {
var legEvtId = "on"+evtId;
element[legEvtId] = handler;
}
}
function getSender(evt, local) {
if (!evt) {
evt = window.event;
}
var sender;
if (evt.srcElement) {
sender = evt.srcElement;
} else {
sender = local;
}
return sender;
}
function onBeforeZoom(evt) {
var zoom = 320 / window.innerWidth;
var element = getSender(evt);
element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
var element = getSender(evt);
element.style.fontSize = "";
}
function disableZoom() {
// Search all relevant input elements and attach zoom-events
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
attachEvent(inputs[i], "focus", onBeforeZoom);
attachEvent(inputs[i], "blur", onAfterZoom);
}
}
if (navigator.userAgent.match(/iPhone/i)) {
attachEvent(window, "load", disableZoom);
}
// -->
</script>
推荐文章
- 样式化HTML电子邮件的最佳实践
- CSS/HTML:什么是使文本斜体的正确方法?
- 使用jQuery改变输入字段的类型
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- CSS div元素-如何显示水平滚动条只?
- 如何修复UITableView分隔符在iOS 7?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- 复选框输入是否只在被选中时才发布数据?
- 是类型="文本/css"必须在<链接>标签?
- 如何将LaTeX与Markdown混合?
- 如何使<div>总是全屏?
- 在Swift中根据字符串计算UILabel的大小