`
iaiai
  • 浏览: 2146791 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

meta 之 viewport(移动网页的全屏)

 
阅读更多
整理硬盘中几个月来整的小东西,移动网页开发涉及到 viewport,随意一篇,分享一下。
常用的 viewport meta 如下:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,initial-scale=1.0,maximum-scale=2.0",user-scalable=no" />


1、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素)

2、height : 和width相对应,指定高度

3、initial-scale : 初始缩放比例,页面第一次加载时的缩放比例

4、maximum-scale : 允许用户缩放到的最大比例,范围从0到10.0

5、minimum-scale : 允许用户缩放到的最小比例,范围从0到10.0

6、user-scalable : 用户是否可以手动缩放,值可以是:①yes、 true允许用户缩放;②no、false不允许用户缩放
分享到:
评论

相关推荐

    html meta viewport属性说明

    什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”...一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下: &lt;meta name=”viewport” content

    html网页中meta viewport属性说明

    HTML meta viewport属性说明 什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”...一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下: 复制代码代码

    HTML meta viewport属性详细说明

    什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”...一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下: &lt;meta name=”viewport” cont

    meta viewport使网页在iPhone中满屏显示控制

    无奈之下,忽然想到,自己常常访问的新浪触屏版是怎么做的?打开Opera, 看源码在HTML头发现了meta viewport,难道是这个家伙在发挥作用吗? 加上试试,果然满屏了。顺便去查了一下这个标签的作用,记录一下,方便...

    深入理解移动前端开发之viewport

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备...

    浅析HTML5 meta viewport参数

    但是你只有了解了移动设备的meta viewport参数之后,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 viewport是什么?通俗的讲,viewport是用户网页的可视区域。移动设备上的viewport就是设备的屏幕...

    移动前端,h5 ,viewport 详解

    h5 中viewport的详解,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

    meta标签在移动平台开发中的应用详解

    1、Meta 之 viewport 说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢?viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的...

    viewport 的基本原理以及详细使用方法

    我们有时用移动设备访问桌面版网页就会看到一个横向滚动条,这里可显示区域的宽度就是viewport的宽度。 常规使用,页面可以缩放就用下面的代码 &lt;meta name="viewport" content="width=device-width, initial-...

    移动前端开发之viewport的深入理解1

    默认情况下,般来讲,移动设备上的viewport都是要于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌电脑来说都较,所以为了能在移动设备上正常显那些传

    移动端html5 meta标签的神奇功效

    制作手机版网站的时候,除了页面简洁、操作方便等访问者可以看到的... 1、Meta 之 viewport 说到移动平台meta标签,那就不得不说一下viewport了,那么什么是viewport呢? viewport即可视区域,对于桌面浏览器而言,vie

    viewport响应式模板

    viewport响应式模板

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

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

    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 初始的缩放...

    meta-viewport-adder:仅将meta视口标签添加到没有该标签的网站

    Meta Viewport Adder的创建是为了解决使用我最喜欢的浏览器Firefox时遇到的问题,我的目标不是要自己短期或长期添加功能。 如果你想添加任何功能,提高代码等; 您可以随时这样做。 在以下位置找到它: 。 Chrome...

    meta viewport标签的使用说明(手机浏览缩放控制)

    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...

Global site tag (gtag.js) - Google Analytics