viewport 语法介绍

<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"/>

width
控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height
和 width 相对应,指定高度。

initial-scale
初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。

maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。

user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。
所有的缩放值都必须在0.01–10的范围之内。

示例1:设置屏幕宽度为设备宽度,禁止用户手动调整缩放
<meta name="viewport" content="width=device-width,user-scalable=no" />

示例2:设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
dpi-value - 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间

转载于:https://www.cnblogs.com/czzjin/p/11114830.html

手机网页H5 自适应不同分辨率的屏幕 必学标签meta之viewport相关推荐

  1. 手机整屏显示数据php,完美解决手机网页大背景不能铺完整个屏幕的超级代码

    html,body{min-height:100%;} ============优化================ html{min-height:100%;} html,body{min-heig ...

  2. 手机网页图片自适应大小 background-size css 图片全屏 背景尺寸设置

    老生常谈,老手跳过,新手进来. 思路:图片不要设置为div的background,因为你设置了background-size,但是div的height没设置,一样没鸟用,除非你搞个js判断,动态刷新. ...

  3. 微信H5手机网页开发—快速入门

    序言 随着微信(WeChat)的盛行,一个流行的开发工作也随之诞生--微信公众号开发,而其中最主要的部分,当属微信H5网页开发. 虽然网页开发大家并不陌生,但层出不穷的手机型号,导致了微信网页开发中遇 ...

  4. H5自适应屏幕分辨率大小

    说明: ①:H5自适应不同分辨率的设备,其实主要就一句 <meta name="viewport" content="width=device-width,init ...

  5. BODY background=自适应大小_自适应(电脑/平板/手机)网页,自适应网页设计练习总结...

    刚好写了个练习,应该是这种效果吧! 电脑端: 电脑 手机端:(当然还可以写平板页面啦) S5 iphone ①将网页调整权交给网页(html中) - <head>标签中加入一行viewpo ...

  6. 网页h5适配iPhoneX

    前言 如上图所示:对比iPhone8,iPhoneX的屏幕高度增145px,上下新增高度如图二所示.对于相对底部 fixed 定位的元素浏览器的展现都是有问题的.对于底部,如下图是适配前后的对比图(如 ...

  7. 手机网页唤醒支付宝APP发送加好友验证

    手机网页唤醒支付宝APP发送加好友验证 <html><head><meta charset="utf-8" /><meta name=&q ...

  8. 微信公众平台Java开发如何让网页自适应不同分辨率的手机浏

     在做微信公众平台开发的朋友应该会遇到这样的问题,开发的网页在不同分辨率的手机显示大小不同,不能根据分辨率的不同而自动调节大小,下面就告诉大家如何解决.    1.  使用HTML中的viewpo ...

  9. 使PC端网页宽度自适应手机屏幕大小

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

最新文章

  1. 一个资深技术人的转型之路
  2. Postgresql死锁的处理
  3. ubuntu linux的特点,16个新特性,让你爱上Ubuntu 20.04,
  4. net start mysql 发生系统错误2 系统找不到指定的文件
  5. [ECMAScript] es6对函数做了哪些优化?
  6. “无法解析外部符号 __security_cookie”问题解决
  7. MQ 之 RocketMQ
  8. python的根号运算_python怎么表示根号运算
  9. matlab数值模拟的例子,第12章 MATLAB 数值模拟实例解析课件
  10. mybatis根据表逆向自动化生成代码(自动生成实体类、mapper文件、mapper.xml文件)
  11. rem在响应式布局中的应用
  12. 案例分享:Windows Phone上的移动浏览体验
  13. BlueScreenView: 系统蓝屏分析工具
  14. Fortran common
  15. 教你撩妹,每天给小姐姐发一封暖心邮件
  16. vue3中 inject provide的响应式使用
  17. 路由协议(实例讲解)
  18. 使用URL Rewrite实现网站伪静态
  19. netty tcp空闲设置
  20. 做修改时,html各种类型选中状态

热门文章

  1. [Leetcode] Wiggle Sort 摇摆排序
  2. 面向对象设计领域的OCP原则
  3. 一次因NAS存储故障引起的Linux系统恢复案例
  4. sql的外键约束和主键约束_SQL主键约束用示例解释
  5. 如何使用Python和Tkinter构建Toy Markdown编辑器
  6. 领域驱动设计 敏捷_反馈失败:发现敏捷数据驱动的致命弱点的风险
  7. 【Linux学习笔记】 -- 基本Shell命令
  8. mysql中没有内置函数_[mysql]MySQL中的内置函数
  9. 应用设计模式进行重构来消除坏味道
  10. java虚拟机栈帧_Java虚拟机,运行时栈帧结构