Html 针对固定视口大小禁用移动设备上的缩放

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24860498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:17:38  来源:igfitidea点击:

Disable zoom on mobile devices for fixed viewport size

htmlcss

提问by Awais Umar

I am trying to disable zoom on mobile devices. I know this code will work.

我正在尝试在移动设备上禁用缩放。我知道这段代码会起作用。

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

But in my case, i have not the option to use "width=device-width". I have to set the viewport size to 480px so i am using the following code

但就我而言,我无法选择使用“width=device-width”。我必须将视口大小设置为 480px 所以我使用以下代码

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

But i get a zoomed in view of the page on mobile device and i am able to zoom it out.

但是我可以放大移动设备上的页面视图,并且可以将其缩小。

回答by Awais Umar

Using "target-densitydpi=device-dpi" and hence the code

使用“target-densitydpi=device-dpi”和代码

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

fixed my problem. Thanks to Dave Rook

解决了我的问题。感谢戴夫·鲁克

回答by Vn Guzman

I think you'd better use 100% instead of 480

我认为你最好使用 100% 而不是 480

回答by Jester

I've had a similar problem recently where when I first load my page I need it to be completely shown on the mobile devices, but it was constantly being zoomed in at exactly the width of the device based on my fixed viewport width. Here is what I had:

我最近遇到了一个类似的问题,当我第一次加载我的页面时,我需要它完全显示在移动设备上,但它不断地根据我的固定视口宽度以设备的宽度进行放大。这是我所拥有的:

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

I removed the initial-scale=1.0and there was no issue afterward. You can of course still use the user-scalable=noto keep from being able to zoom as you requested.

我删除了initial-scale=1.0之后就没有问题了。当然,您仍然可以使用user-scalable=no来防止按照您的要求进行缩放。