随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应 用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习html5 viewport的使用能帮你做到这一点……
viewport 语法介绍:
01 |
<!-- html document --> |
04 |
height = [pixel_value | device-height] , |
05 |
width = [pixel_value | device-width ] , |
06 |
initial-scale = float_value , |
07 |
minimum-scale = float_value , |
08 |
maximum-scale = float_value , |
09 |
user-scalable = [yes | no] , |
10 |
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] |
width
控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height
和 width 相对应,指定高度。
target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密 度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。
下面是 target-densitydpi 属性的 取值范围
- device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
- high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
- medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.
- low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
- <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
2 |
<meta name="viewport" content="target-densitydpi=device-dpi" /> |
3 |
<meta name="viewport" content="target-densitydpi=high-dpi" /> |
4 |
<meta name="viewport" content="target-densitydpi=medium-dpi" /> |
5 |
<meta name="viewport" content="target-densitydpi=low-dpi" /> |
6 |
<meta name="viewport" content="target-densitydpi=200" /> |
为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放,你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了,页面将不会缩放。相反,页面会根据当前屏幕的像素密度进行展示。在这种情形下,你还需要将viewport的 width定义为与设备的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的范围之内。
例:
(设置屏幕宽度为设备宽度,禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width,user-scalable=no" />
(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放)
<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"/>
分享到:
相关推荐
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们...学习html5 viewport
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。这里首先了解以下几个概念。 layout ...
HTML5开发实训:让我们学会用代码编写网页,最重要的是学会HTML5的基础运用,了解安卓系统方面的一些知识!有利于我们以后的网页设计学习! 二、实习内容 第一天,我们学习了用代码写网页最基本的知识,如: <!...
随着移动端的流行,在移动端对网站进行重构和开发势在必行。但是你只有了解了移动设备的meta viewport参数之后,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 viewport是什么?通俗的讲,viewport...
《HTML5触摸界面设计与开发》专注于触摸界面的开发,内容的结构和优化网站的思路大概一致。上半部分涵盖了能使各类网站,特别是移动网站变快的基本概念。第2章和第3章告诉你如何创建一个简单的网站,并能快速加载。...
鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...
已添加viewport 必要JS 范例CSS 可以直接用于生产环境 直接 开发移动端全屏页面 直接 开发WEB-APP HTML部分很简单 3秒看懂 5分钟会做WEB APP 单页滑动全屏场景应用框架
标签中viewport的值,给我更贴切的体会就是通过js脚本根据设备的dpr和设计图的宽度来计算出html的font-size值,然后就运用rem单位开发可以等比例缩放的H5页面。 但是!Flexible已经完成了他自身的历史使命,我们...
Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型。 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和...
vite-plugin-html English | 用于index.html的Vite插件,可提供基于Minify和EJS模板的功能。... meta name =" viewport " content =" width=device-width, initial-scale=1.0 " /> < title > < %
hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍 三种解决方式:1 viewport属性 2 CSS控制 3 JS控制 1 viewport属性放在HTML的<meta>中 Html代码 代码如下: <SPANstyle> <head> <title>Exmaple</title...
如何使用 开发 npm run serve 打包 npm run build 分析打包 npm run analyze 代码棉绒 npm run lint 自动生成文件 npm run new 目录结构 具体参见tree.txt 主要功能 rem适应 html meta修改 < meta name =" ...
6.2. ViewPort对整个窗口布局 6.3. 脑袋上有几个标签的tabPanel 6.4. 让布局复杂一点儿 6.5. 向诸位介绍一下各具特色的布局 6.5.1. accordion就是QQ那样的伸缩菜单 6.5.2. CardLayout?其实就是Wizard啦。 6.5.3. 呼...
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 两数组找相同 ## 1.给定两个数组,编写一个函数来计算它们的交集。 - 输出结果中的每个元素一定是唯一的。 ``` 输入:nums1 = ...
本案例是使用WEB技术(HTML、JavaScript、CSS)直接构建的移动端APP。本套视频深入移动端开发的最核心部分。讲解了移动端的像素理论,视口理论。深入剖析了rem适配,viewport适配的原理。整个项目在css层面封装度也很...