如何在移动网页上“禁用”缩放？

本文翻译自：How can I “disable” zoom on a mobile web page?

I am creating a mobile web page that is basically a big form with several text inputs. 我正在创建一个移动网页，它基本上是一个包含多个文本输入的大表单。

However (at least on my Android cellphone), every time I click on some input the whole page zooms there, obscuring the rest of the page. 但是（至少在我的Android手机上），每次点击某些输入时，整个页面都会缩放，遮挡页面的其余部分。 Is there some HTML or CSS command to disable this kind of zoom on moble web pages? 是否有一些HTML或CSS命令可以在moble网页上禁用这种缩放？

#1楼

参考：https://stackoom.com/question/IlbP/如何在移动网页上-禁用-缩放

#2楼

You can use: 您可以使用：

<head><meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />...
</head>

But please note that with Android 4.4 the property target-densitydpi is no longer supported . 但请注意，对于Android 4.4 ，不再支持属性target-densitydpi 。 So for Android 4.4 and later the following is suggested as best practice: 因此，对于Android 4.4及更高版本，建议将以下内容作为最佳做法：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

#3楼

For those of you late to the party, kgutteridge's answer doesn't work for me and Benny Neugebauer's answer includes target-densitydpi (a feature that is being deprecated ). 对于那些迟到的人来说，kgutteridge的答案对我不起作用，Benny Neugebauer的答案包括target-densitydpi（一个被弃用的功能）。

This however does work for me: 但这对我有用：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

#4楼

There are a number of approaches here- and though the position is that typically users should not be restricted when it comes to zooming for accessibility purposes, there may be incidences where is it required: 这里有许多方法 - 虽然位置通常是用户在进行可访问性缩放时不应受到限制 ，但可能会出现以下情况：

Render the page at the width of the device, dont scale: 在设备的宽度处渲染页面，不要缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Prevent scaling- and prevent the user from being able to zoom: 防止缩放 - 并防止用户缩放：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Removing all zooming, all scaling 删除所有缩放，所有缩放

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

#5楼

This should be everything you need 这应该是你需要的一切

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
/>

#6楼

Since there is still no solution for initial issue, here's my pure CSS two cents. 由于最初的问题仍然没有解决方案，这里是我的纯CSS两分钱。

Mobile browsers (most of them) require font-size in inputs to be 16px. 移动浏览器（大多数）要求输入中的字体大小为16px。 So 所以

 input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"] { font-size: 16px; }

solves the issue. 解决了这个问题。 So you don't need to disable zoom and loose accessibility features of you site. 因此，您无需禁用站点的缩放和松散辅助功能。

If your base font-size is not 16px or not 16px on mobiles, you can use media queries. 如果移动设备上的基本字体大小不是16px或不是16px，则可以使用媒体查询。

 @media screen and (max-width: 767px) { input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"] { font-size: 16px; } }

如何在移动网页上“禁用”缩放？相关推荐

页面缩放android浏览器,适用于所有移动浏览器的完整网页和禁用的缩放视口元标记...
不幸的是,每个浏览器都有自己的视口元标记实现.不同的组合将在不同的浏览器上工作. Android 2.2:似乎根本不支持视口元标记. Android 2.3.x / 3.x:通过设置user-scal ...
win32 禁用缩放功能_Firefox 73 将引入全局缩放功能，在所有网站都可适用
Firefox 好久都没有用过了,刚刚无意中刷到又有新版本更新了(Firefox 73),好像很厉害的样子分享给大家. Firefox 用户可能很快就能在浏览器中为所有网站设置全局缩放级别.目前,用户 ...
如何让网页弹出确定_电脑去除网页上弹窗广告的操作方法
我们在上网查阅资料的时候,都需要打开浏览器上网页,总是有部分网站会有广告,要一个一个不停的关闭这些广告很烦人,严重影响了使用的体验,电脑如何屏蔽网页上弹窗广告?下面小编就教大家一个去除网页上弹窗广告的 ...
网页上的摄影展:等高响应布局实现
「等高响应式布局」是什么?介绍它之前,我们先回忆一下它的近亲「等宽响应式瀑布流」. 回忆一下,Pinterest.Google+.花瓣网.美丽说等是否让你沉浸于不断往下拉体验丰富的图片阅览? 那种感觉 ...
android webview缩放功能,在Android WebView中启用/禁用缩放
千万里不及你在为客户开发Android应用程序时,我们遇到了同样的问题,我设法绕过了这一限制.我查看了WebView类的Android源代码,发现了updateZoomButtonsEnabled( ...
怎么复制网页上不能复制的文字
们在浏览网页的时候,时常会觉得有的内容不错,想复制下来,却发现有的网页内容不能复制,今天就教大家如何解决这个问题. 虽然可以通过禁用脚本或是"查看源文件",在源文件代码中复制需要的 ...
网页上的文字不能复制怎么办？
网页上的文字不能复制怎么办? 1,网页中嵌入了javascript语言,通过编程手段屏蔽了复制. 只要点击IE的"工具"→"Internet选项"菜单,进入&q ...
HTML网页上常见的3种单位是,HTML_CSS中常用的单位，一、长度单位长度单位 - phpStudy...
CSS中常用的单位一.长度单位长度单位是Web页设计中最常用的一个单位.一个排列无序.杂乱无章的页面不可能给人们留下什么好的印象.于是,在设计的时候需要为元素的位置.尺寸精确地定义一些值,以使其达 ...
迪士尼源码_如何在迪士尼+上禁用自动播放和背景视频
迪士尼源码 Just like Netflix, Disney+ makes it easy to binge-watch a show by automatically playing the ne ...

如何在移动网页上“禁用”缩放？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

如何在移动网页上“禁用”缩放？相关推荐

最新文章

热门文章