viewport使用 html5
viewport 语法介绍:
01
02
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。中等像素密度和高像素密度设备相应放大。
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的范围之内。
例:
(设置屏幕宽度为设备宽度,禁止用户手动调整缩放)
(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放)
viewport使用 html5的更多相关文章
- html5 canvas 画图移动端出现锯齿毛边的解决方法
使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...
- 深入浅出 Viewport 设计原理
Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现,提供响应式解决方案.这篇文章尝试通过循序渐进的方式,逐层探索 Viewport 的设 ...
- 有关CSS中字体响应式的设置
在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...
- CSS中字体响应式的设置
在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...
- HTML5开发手机应用--viewport的作用
在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <met ...
- html5开发之viewport使用
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...
- HTML5[2]:使用viewport控制手机浏览器布局
基本 <meta name="viewport" content="width=device-width, initial-scale=1">192 ...
- HTML5 Viewport Meta Tag
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/U ...
- HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容
要使一张图片不论在移动端还是在桌面端都能适应区域内容,可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性. 适应区域内容是指图片的宽或高的长度满足 ...
随机推荐
- SSIS Error Code DTS_E_OLEDB_NOPROVIDER_64BIT_ERROR
将一批Job从一台agent服务器搬到另外一台agent, 没有做任何的修改,但是job执行的时候报错. Error: 2014-07-03 14:42:57.14 Code: 0xC0209303 ...
- javascript 同步加载与异步加载
HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面 ...
- php 导出csv
public function doworks(){ //输出Excel文件头,可把user.csv换成你要的文件名 header('Content-Type: appli ...
- C++ 牛人博客(不断更新中...)
http://www.zhangjiee.com/ 新浪微博@独酌逸醉. Github. GitCafe. stackoverflow. Quora http://cpp1x.org/ 刘未鹏 | M ...
- Nginx 开启 path_info功能
server { listen ; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; roo ...
- Android开发中Ant命令编译和APK签名的一些心得
本文章麦子学院跟小伙伴们详细的分享一下关于Android Ant命令行编译和APK签名详解一些实现方法,这是一个朋友在自己做安卓开发时写的,希望对大家会有所帮助呀. 最近在做Android开发时,需要 ...
- 使用plupload绕过服务器,批量上传图片到又拍云
本文最初发布于我的个人博客:Jerry的乐园 综述 论坛或者贴吧经常会需要分享很多图片,上传图片比较差的做法是上传到中央服务器上,中央服务器再转发给静态图片服务器.而这篇文章讲介绍如何使用pluplo ...
- 软件工程 speedsnail 冲刺4
2015-5-8 完成任务:学习了黑马android教学视频7.8.9集,对布局和计划做了调整: 遇到问题: 问题1 异常 Warning: Activity not started, its cur ...
- Objective-C特点
1.兼容性 OC是一种面向对象的C语言,在OC的代码中可以有C和C++语句,它可以调用C函数,也可以通过C++对象访问方法. 2.字符串 OC通常不使用C语言风格的字符串.大多数情况下(CoreFou ...
- Hide a Subpage Using PeopleCode
There was a question asked on the forum on how to hid a subpage. There is no Peoplecode function to ...