Disable initial zoom when viewing a page with mobile

江枫思渺然 提交于 2019-12-08 03:38:04

问题


Is there a possbility to disable the initial zoom you get when viewing a page with your smartphone?

I don't want to disable zoom, I'd just like the user to view the entire page (=> width) when loading it and not just a small rectangle.

I've tried several solutions suggested by others but none of them worked for me.


回答1:


Okay well that was easy. I slightly tweaked a solution I found from Google. Here's the only code that worked for me:

<meta name="viewport" content="width=960; user-scalable=yes;" />

It sets the default zoom to 960px (change to the width of your page) and still allows the user to zoom in/out.

EDIT: It looks like it allows zoom on the default Internet Browser (SGS4) but it disables zoom when using Google Chrome.




回答2:


Try add this to the head of your document:

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

Where initial-scale is how much you want it to be initially, maximum-scale is how much the user is able to zoom, and user-scalable is whether or not they are allowed to zoom.

The target-densitydpi=device-dpi is needed for mobile devices with a high dpi (or resolution) such as the Samsung Galaxy S4 but it is added to the end of the meta because devices such as the iPhone does not recognize it.

I haven't tested this myself on an SGS4 because I do not own one but if you want to be specific on the initial-scale of the device, can try adding media="(device-width: 480px) and (device-height: 800px)" after user-scalable where 480px is the viewport width of the SGS4 and the 800px is the viewport height of a SGS4. So it should look like: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes", media="(device-width: 480px) and (device-height: 800px)", target-densitydpi=device-dpi />




回答3:


Add this to your head <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Read up here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag



来源:https://stackoverflow.com/questions/17821639/disable-initial-zoom-when-viewing-a-page-with-mobile

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!