`
stargaga
  • 浏览: 18686 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
社区版块
存档分类
最新评论

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 的意思

 
阅读更多
<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:这个功能是在移动设备上使用的。
分享到:
评论

相关推荐

    元旦倒计时代码-元旦倒计时.html

    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"&gt; &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt; &lt;meta name="apple...

    前端picker.js 选择器 轮选择器

    &lt;meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"&gt; &lt;/head&gt; &lt;body&gt; &lt;section class="page-header"&gt; &lt;h1 class="project-name"&gt;...

    答题送福利

    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt; &lt;script src="./assets/js/jquery.min.js"&gt;&lt;/script&gt; &lt;link rel=...

    html5网页设计作业

    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt; &lt;meta name="description" content=""&gt; &lt;meta name="author" content="BBQ"&gt; &lt;title&gt;烤天下酒吧...

    doctype html

    meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /&gt; &lt;meta name="apple-touch-fullscreen" content="yes" /&gt; ...

    游戏源码游戏游戏游戏游戏游戏游戏

    &lt;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"/&gt; &lt;script type="text/javascript" src="js/...

    【JavaScript源代码】多种类型jQuery网页验证码插件代码实例.docx

    charset=utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"&gt; &lt;title&gt;jQuery网页验证码插件&lt;/title&gt; &lt;link rel="st

    touch.js JQuery touch插件

    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no"&gt; &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt; &lt;meta name="apple-mobile-...

    移动全屏代码

    &lt;meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"&gt; &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt; &lt;meta name="apple-mobile-web-app-...

    自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    主要介绍了移动客户端手机页面布局时各标签元素作用和适用情景,通过详解几种属性让读者更明确自适应布局的注意点,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。

    易优cms响应式网站模板,EyouCMS网络科技公司网站模板

    &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt; &lt;!--首页seo标题--&gt; &lt;title&gt;{eyou:global name='web_title' /}_{eyou:global ...

    【JavaScript源代码】原生JavaScript实现简单五子棋游戏.docx

    DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no"&gt; &lt;title&gt;五子棋&lt;/t

    购物车商品累加结算效果.zip

    meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"&gt; &lt;title&gt;vue购物车商品累加结算代码 &lt;/title&gt; &lt;!--css类引用--&gt; &lt;link ...

    meta标签中的使用viewport定义屏幕css

    meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt; width-viewport的宽度 height-viewport的高度 initial-scale 初始的缩放...

    【JavaScript源代码】Jquery+javascript实现支付网页数字键盘.docx

    Jquery+javascript实现支付网页数字键盘 ...DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"&gt; &lt;meta conten

    适合jq的滑动解锁特效

    meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt; &lt;!-- css --&gt; &lt;link rel="stylesheet" type="text/css" href="css/normalize.css"&gt; &lt;link rel=...

    一些有用的meta设置方法(必看)

    meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt; &lt;meta name="format-detection" content="telephone=no"&gt; &lt;meta name="apple-mobile-web-app-capable" ...

    zepto手机移动端拼音字母城市选择代码.zip

    meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"&gt; &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt; &lt;meta name="apple-...

    vue input实现点击按钮文字增删功能示例

    分享给大家供大家参考,具体如下... content=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&gt; &lt;meta http-equiv=X-UA-Compatible content=ie=edge&gt; &lt;t

    jQuery手机端仿探探APP切换特效.zip

    meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt; &lt;link rel="stylesheet" href="css/photoSwipe.css?3.1.64"&gt; &lt;...

Global site tag (gtag.js) - Google Analytics