手机网页H5 自适应不同分辨率的屏幕 必学标签meta之viewport
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相关推荐
- 手机整屏显示数据php,完美解决手机网页大背景不能铺完整个屏幕的超级代码
html,body{min-height:100%;} ============优化================ html{min-height:100%;} html,body{min-heig ...
- 手机网页图片自适应大小 background-size css 图片全屏 背景尺寸设置
老生常谈,老手跳过,新手进来. 思路:图片不要设置为div的background,因为你设置了background-size,但是div的height没设置,一样没鸟用,除非你搞个js判断,动态刷新. ...
- 微信H5手机网页开发—快速入门
序言 随着微信(WeChat)的盛行,一个流行的开发工作也随之诞生--微信公众号开发,而其中最主要的部分,当属微信H5网页开发. 虽然网页开发大家并不陌生,但层出不穷的手机型号,导致了微信网页开发中遇 ...
- H5自适应屏幕分辨率大小
说明: ①:H5自适应不同分辨率的设备,其实主要就一句 <meta name="viewport" content="width=device-width,init ...
- BODY background=自适应大小_自适应(电脑/平板/手机)网页,自适应网页设计练习总结...
刚好写了个练习,应该是这种效果吧! 电脑端: 电脑 手机端:(当然还可以写平板页面啦) S5 iphone ①将网页调整权交给网页(html中) - <head>标签中加入一行viewpo ...
- 网页h5适配iPhoneX
前言 如上图所示:对比iPhone8,iPhoneX的屏幕高度增145px,上下新增高度如图二所示.对于相对底部 fixed 定位的元素浏览器的展现都是有问题的.对于底部,如下图是适配前后的对比图(如 ...
- 手机网页唤醒支付宝APP发送加好友验证
手机网页唤醒支付宝APP发送加好友验证 <html><head><meta charset="utf-8" /><meta name=&q ...
- 微信公众平台Java开发如何让网页自适应不同分辨率的手机浏
在做微信公众平台开发的朋友应该会遇到这样的问题,开发的网页在不同分辨率的手机显示大小不同,不能根据分辨率的不同而自动调节大小,下面就告诉大家如何解决. 1. 使用HTML中的viewpo ...
- 使PC端网页宽度自适应手机屏幕大小
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
最新文章
- 一个资深技术人的转型之路
- Postgresql死锁的处理
- ubuntu linux的特点,16个新特性,让你爱上Ubuntu 20.04,
- net start mysql 发生系统错误2 系统找不到指定的文件
- [ECMAScript] es6对函数做了哪些优化?
- “无法解析外部符号 __security_cookie”问题解决
- MQ 之 RocketMQ
- python的根号运算_python怎么表示根号运算
- matlab数值模拟的例子,第12章 MATLAB 数值模拟实例解析课件
- mybatis根据表逆向自动化生成代码(自动生成实体类、mapper文件、mapper.xml文件)
- rem在响应式布局中的应用
- 案例分享:Windows Phone上的移动浏览体验
- BlueScreenView: 系统蓝屏分析工具
- Fortran common
- 教你撩妹,每天给小姐姐发一封暖心邮件
- vue3中 inject provide的响应式使用
- 路由协议(实例讲解)
- 使用URL Rewrite实现网站伪静态
- netty tcp空闲设置
- 做修改时,html各种类型选中状态
热门文章
- [Leetcode] Wiggle Sort 摇摆排序
- 面向对象设计领域的OCP原则
- 一次因NAS存储故障引起的Linux系统恢复案例
- sql的外键约束和主键约束_SQL主键约束用示例解释
- 如何使用Python和Tkinter构建Toy Markdown编辑器
- 领域驱动设计 敏捷_反馈失败:发现敏捷数据驱动的致命弱点的风险
- 【Linux学习笔记】 -- 基本Shell命令
- mysql中没有内置函数_[mysql]MySQL中的内置函数
- 应用设计模式进行重构来消除坏味道
- java虚拟机栈帧_Java虚拟机,运行时栈帧结构