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. lecture16-联合模型、分层坐标系、超参数优化及本课未来的探讨

    这是HInton的第16课,也是最后一课. 一.学习一个图像和标题的联合模型 在这部分,会介绍一些最近的在学习标题和描述图片的特征向量的联合模型上面的工作.在之前的lecture中,介绍了如何从图像中 ...

  2. <实训|第五天>通过搭建NFS,FTP实现共享文件附Vim脚本游戏

    先说个事情:我周末是不更新这个系列教程的,不过其他内容的会更新,我周末就整理这一周的各种内容到我的微信公众号中,提供给大家! 期待已久的linux运维.oracle"培训班"终于开 ...

  3. JSON返回DateTime/Date('123123123')/解决办法

    Date.prototype.format = function (format) //author: meizz    {        var o = {            "M+& ...

  4. [poj 3537]Crosses and Crosses(博弈论)

    题目:http://poj.org/problem?id=3537 题意:给你n个格子,两个人依次在n个格子的任意空位置画"X",谁如果画了一个后,3个X连在了一起,那么那个人就获 ...

  5. Congruence relation 同余关系

    https://en.wikipedia.org/wiki/Congruence_relation https://zh.wikipedia.org/wiki/%E5%90%8C%E9%A4%98%E ...

  6. Win2008上.NET4.0部署出错HTTP 错误 500.21 - Internal Server Error的解决方法

    原因:在安装Framework v4.0之后,再启用IIS,导致Framework没有完全安装 解决:开始->所有程序->附件->鼠标右键点击“命令提示符”->以管理员身份运行 ...

  7. 【jQuery EasyUI系列】创建CRUD数据网格

    在上一篇中我们使用对话框组件创建了CRUD应用创建和编辑用户信息.本篇我们来创建一个CRUD数据网格DataGrid 步骤1,在HTML标签中定义数据网格(DataGrid) <table id ...

  8. android开发------第一个android程序

    好吧,现在我们就一起来写第一个android程序,看它带给了我们什么.sdk的使用和虚拟机的创建我就不说了.项目创建过程先略过,不太重要. 那第一个程序我们能学到什么知识呢?一起看吧.^-^ 在IDE ...

  9. 升級 Centos 6.5 的 php 版本

    升級 Centos 6.5 的 php 版本   待會再看 Centos 6.5 的 php 預設是用 5.3.3 這個版本號 最近想要改用 Laravel 4.1 發現需要 5.3.7 才能用,所以 ...

  10. HTML-图片热点、网页内嵌、网页拼接、快速切图

    图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.与图片链接不同,热点是图片上的某一个区域或多个区域. 我们用魔兽世界图片来做一个图片热点,点击logo.区域和不 ...