<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
在百度地图和google map中,建议用户使用上方的meta类型,我查找到了一些论坛中的讨论,原文如下:
I'm using the Google Maps JavaScript API V3 and the official examples always have you include this meta tag:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Most of the 3rd-party examples I've seen also do it. I wrote a plugin using it, though, and one of my users told me it's preventing him from being able to zoom in and out on his mobile device. I don't have a mobile device to test with, and none of my searches revealed any helpful information.
回答是:
On many devices (such as the iPhone), it prevents the user from using the browser's zoom. If you have a map and the browser does the zooming, then the user will see a big ol' pixelated image with huge pixelated labels. The idea is that the user should use the zooming provided by Google Maps. Not sure about any interaction with your plugin, but that's what it's there for.
大致意思是,google map中的图片是有固定大小和像素的,为了避免用户使用浏览器的放大缩小页面的功能改变map中图片的显示,如放大窗口(ctrl + scroll),会改变图片的显示,导致地图显示不正常。所以google map利用这个语句禁止用户利用浏览器放大缩小窗口,建议用户使用google map自己的放大缩小功能。
ps:这个功能是在移动设备上使用的。
分享到:
相关推荐
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple...
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> </head> <body> <section class="page-header"> <h1 class="project-name">...
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <script src="./assets/js/jquery.min.js"></script> <link rel=...
meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> <meta name="apple-touch-fullscreen" content="yes" /> ...
<meta name="viewport" content="initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, width=device-width,target-densitydpi=device-dpi"/> <script type="text/javascript" src="js/...
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结 在移动客户端手机页面布局中,meta标签的使用非常重要,今天我们将详细介绍meta标签中的几个关键属性,包括...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-...
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-...
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!--首页seo标题--> <title>{eyou:global name='web_title' /}_{eyou:global ...
meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"> <title>vue购物车商品累加结算代码 </title> <!--css类引用--> <link ...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>注册</title> <link rel="stylesheet" href="bootstrap.min.css"> <style> input { ...
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="common/font_137970_p1tpzmomxp9cnmi.css"> ...
meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> width-viewport的宽度 height-viewport的高度 initial-scale 初始的缩放...
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no"/> <title>demo</title>...
meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- css --> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel=...
<meta name="viewport" content="width=device-width, initial-scale=1"> ``` 这个标签告诉浏览器将viewport的宽度设置为设备的宽度,并保持初始缩放比例为1,确保页面按比例缩放,以适应不同设备。 除了`width`和`...
meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" ...
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="sencha-touch.css"> <title>Hello...
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-...