Meta标签中的viewport属性及含义
一、什么是Viewport
二、Viewport基础
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
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不允许用户缩放
三、关于viewport的一些问题
viewport并非只是ios上的独有属性,在android、winphone上同样也有viewport。它们要解决的问题是相同的,即无视设备的真实分辨率,直接通过dpi,在物理尺寸和浏览器之间重设分辨率,这个分辨率和设备的分辨率无关。比如,你拿个3.5寸-320
* 480的iphone3 gs、3.5寸-640 *
960的iphone4或者9.7寸-1024*768的ipad2,虽然设备的分辨率不同,物理尺寸也不同,但你可以通过设置viewport让它们在浏览器里有相同的分辨率。比如说,你的网站是800px宽,你可以通过设置viewport的width=800,来让你的网站在这三个不同的设备上都刚好满屏显示你的网站。
网上一搜关于viewport的知识,基本上全都是如下信息:
这段代码的意思是,让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。一都主流的web
app都是这么设置的,它的作用其实是故意舍弃viewport,不缩放页面,这样dpi肯定和设备上的真实分辨率是一样的,不做任何缩放,网页会因此显得更高细腻。
Meta标签中的viewport属性及含义的更多相关文章
- Meta标签中的format-detection属性及含义(转)
一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...
- HTML Meta标签中的viewport属性含义及设置
两篇文章 第1篇文章 第2篇文章 http://blog.hexu.org/archives/1947.shtml 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移 ...
- Meta标签中的format-detection属性及含义
format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置: meta na ...
- Meta标签中的format-detection属性及含义让IPHONE的数字可以改变颜色
format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置: meta na ...
- Meta标签中的apple-mobile-web-app-capable属性及含义
这meta的作用就是删除默认的苹果工具栏和菜单栏. content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示.
- meta标签中的http-equiv属性使用介绍(转载)
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
- 关于meta标签中的http-equiv属性使用介绍
关于meta标签中的http-equiv属性使用介绍 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标 ...
- 【转】meta标签中的http-equiv属性使用介绍
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
- meta标签中的http-equiv属性使用介绍
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta 标签的作用有:搜索引擎优化(SEO),定义页面使用 ...
随机推荐
- linux 常用命令学习记录
rm -f *.sh 2.grep -rn "enng" * 查找文件内容包含enng的文件(注意:文件名有xian的不会查询出) find . ! -name "*.s ...
- 深入浅出Mybatis系列(九)---强大的动态SQL
上篇文章<深入浅出Mybatis系列(八)---mapper映射文件配置之select.resultMap>简单介绍了mybatis的查询,至此,CRUD都已讲完.本文将介绍mybatis ...
- NoSQL生态系统——事务机制,行锁,LSM,缓存多次写操作,RWN
13.2.4 事务机制 NoSQL系统通常注重性能和扩展性,而非事务机制. 传统的SQL数据库的事务通常都是支持ACID的强事务机制.要保证数据的一致性,通常多个事务是不可能交叉执行的,这样就导致了可 ...
- 多线程完成socket
//服务器端代码 public class Service { //服务器 public static void main(String[] args) { ServerSocket serverSo ...
- php基础_函数和类
①函数 1.函数名不区分大小写,变量名区分大小写. 2.require()和include() 区别:函数加载失败后,require给出一个致命错误,include只是一个警告. ②类 1.构造方法 ...
- Ubuntu安装node
#!/bin/bash echo "添加环境变量需要root权限,如无root权限,则不添加环境变量" echo "输入Node下载地址(目前仅支持Node官方网站上Li ...
- 提升你的开发效率,10 个 NPM 使用技巧
对于一个项目,常用的一些npm简单命令包含的功能有:初始化一个文件夹(npm init),下载npm模块(npm install),创建测试(npm test) 和自定义脚本(npm run).但是, ...
- HttpServletRequest常用的方法
假设客户端请求的地址:http://localhost:8082/TestReq/MyServlet/?username=李雷&age=20 request.getRequestURL htt ...
- PHP初步(上)
一.php语法 PHP是一种嵌入式脚本语言,所以,我们需要标记出哪些是PHP代码,哪些是html代码.当html和php代码进行混编的时候,文件必须要以php结尾(否则Apache不会将这个文件交给p ...
- Volley之 JsonRequest 解析JSON 数据
ReqestQueue 和 JsonRequest String jsonUrl = "http://ip.taobao.com/service/getIpInfo.php?ip=63.22 ...