viewprot屏幕尺寸,专为移动页面设计

参数

<meta name="viewport" content="height,width,initial-scale,minimum-scale,maximum-scale,user-scalable,target-densitydpi" />

width,height

宽高,或者device-width、device-height设备的宽高

initial-scale

初始缩放比例。如果设2.0则会放大两倍

maximum-scale

允许用户缩放最大比例

minumum-scale

允许用户缩放最小比例

usex-scalable

是否可以手动缩放,yes or no

缩放值必须在 0.1 - 10 之间

target-densitydpi

屏幕像素密度由分辨率决定,通常定义为dpi,取值范围如下

device-dpi:使用设备原本的dpi作为目标dpi,不会发生默认缩放

high-dpi:中等像素密度和低像素密度设备相应缩小

medium-dpi:高像素密度设备相应放大,像素密度设备相应缩小。默认

low-dpi:中等像素密度和高像素密度设备相应放大

value:取值范围 70 - 400


<meta name="viewport" content="width=640,user-scalable=no,target-densitydpi=device-dpi">

将宽度设为640,因为目前主流 的设备宽度为640,样式上不用特殊处理,与PC书写保持一致。

Viewprot meta学习笔记的更多相关文章

  1. 淘宝网触屏版 - 学习笔记(1 - 关于meta)

    注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. <meta charset="utf-8"> <meta cont ...

  2. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  4. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  5. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  6. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  7. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  9. 淘宝网触屏版 - 学习笔记(0 - 关于dpr)

    注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name=&qu ...

随机推荐

  1. Web端PHP代码函数覆盖率测试解决方案

    1. 关于代码覆盖率 衡量代码覆盖率有很多种层次,比如行覆盖率,函数/方法覆盖率,类覆盖率,分支覆盖率等等.代码覆盖率也是衡量测试质量的一个重要标准,对于黑盒测试来说,如果你不确定自己的测试用例是否真 ...

  2. react实现的tab切换组件

    我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...

  3. 没有jquery的时候,你看看这个

    vjs var br = (function() { var ua = navigator.userAgent.toLowerCase(); browser = { iPhone: /iphone/. ...

  4. 学习Google Protocol buffer之语法

    上一篇结尾的时候问了几个问题,其实主要就是这个protoBuffer协议的语法,弄清楚语法后边才好开展工作嘛,不然大眼而对小眼儿,互相不认识,就没法玩耍了.其实就是学习怎么用google提供的这套 p ...

  5. IIS7.5开启GZip压缩

    在IIS7.5选择要开启GZip压缩的网站,在功能视图中找到并双击"压缩"图标,在压缩界面中钩选"启用静态内容压缩"和"启用动态内容压缩", ...

  6. Oracle学习——安装系列

    简介:Oracle Database,又名Oracle RDBMS,或简称Oracle.是甲骨文公司的一款关系数据库管理系统.它是在数据库领域一直处于领先地位的产品.可以说Oracle数据库系统是目前 ...

  7. 东大OJ 2SAT 异或

    看了十年才懂懂了十年才会会了十年才会写写了十年才写完写完了十年才能改对 #include<stdio.h> #include<string.h> struct res{ int ...

  8. SpringMVC对日期类型的转换

    在做web开发的时候,页面传入的都是String类型,SpringMVC可以对一些基本的类型进行转换,但是对于日期类的转换可能就需要我们配置. 1.如果查询类使我们自己写,那么在属性前面加上@Date ...

  9. 读取Properties键值对

    public class CommonFunc { /** * 取properties文件中的键值对 */ public static String getProperties(String para ...

  10. Java 关键字static final使用总结

    Static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,被static修饰的成员变量和成员方法独立于该类的任何对象.也就是说,它不依赖类特定的实例,被 ...