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. ImageMagick常用指令详解

    Imagemagick常用指令 (ImageMagick--蓝天白云) (ImageMagick官网) (其他比较有价值的IM参考) (图片自动旋转的前端实现方案) convert 转换图像格式和大小 ...

  2. 闲扯 『 document.write 』

    初春的晚上,闲来无事,聊聊 document.write 方法. document.write 使用方式非常简单,把 "字符串化"(不好意思,这可能是我自己创造的名词)的 html ...

  3. 高性能JavaScript DOM编程

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用 ...

  4. 数据契约(DataContract)及序列化指定输出字段

    服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务端和客户端之间要传送的自定义数据类型. 一旦声明一个类型为DataContract,那么该类型就可以被序列化在服务端和客户端之间传送,如下所 ...

  5. 东大oj-1511: Caoshen like math

    Worfzyq likes Permutation problems.Caoshen and Mengjuju are expert at these problems . They have n c ...

  6. RabbitMQ官方中文入门教程(PHP版) 第三部分:发布/订阅(Publish/Subscribe)

    发布/订阅 在上篇教程中,我们搭建了一个工作队列.每个任务之分发给一个工作者(worker).在本篇教程中,我们要做的之前完全不一样——分发一个消息给多个消费者(consumers).这种模式被称为“ ...

  7. Beta版本冲刺Day2

    会议讨论 628:       和建平同学一起合作解决了如何获取勾选事件,将勾选的课程信息存入select表格中.但是当运行更新后的项目遇到了无法连接数据库的问题了,目前还在解决中. 因为碰到了这样的 ...

  8. CSS hack技术

    首先我们要了解一个概念CSS hack 不同浏览器,比如IE6.IE7.IE8,Mozilla Firefox等,对CSS的支持及解析结果不同,因此会导致相同的网页生成的页面效果不一样. 这个时候我们 ...

  9. SpringMVC学习--异常处理器

    简介 springmvc在处理请求过程中出现异常信息交由异常处理器进行处理,自定义异常处理器可以实现一个系统的异常处理逻辑. 异常处理思路 系统中异常包括两类:预期异常和运行时异常RuntimeExc ...

  10. canvas模拟重力效果

    总结 速度和加速度是动画的基础元素,其中两者都是向量,包括了一个重要因素:方向. 要学会应用 分解 和 合成 ,将速度或加速度分解到x.y轴上,然后将每条轴上的加速度或速度相加,然后再分别与物体的位置 ...