1.viewport

viewport 即设备 屏幕上显示网页的区域。因为移动设备屏幕比较小,为了能让移动设备能够显示更多内容,默认设置的viewport 并不是屏幕真是像素点的宽度,一般为980px 宽或者是其他值(不同的设备可能不一样),但带来的后果就是当网页过宽浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小。

2.像素和物理像素

说到像素和物理像素,就得说一下DPR(devicePixelRatio) 这个词了,DPR表示屏幕 “显示像素” 与 “物理像素” 的比值,一般电脑屏幕的 “独立像素” 等于 “物理像素”。

对于移动端来说,不同的设备 DPR也有所不同,例如同样是 360个物理像素宽度的屏幕 ,有可能能够显示的宽度为 720px 或者960px ,对应的dpr分别为720/360 和960/360。

3.使viewport === 设备物理像素宽度

使用meta标签锁定视口,强制viewport 等于设备宽度,这样一来,1px 显示出来就是1px 。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。

在html的head标签内添加这个meta标签后, 就可以强制让viewport 的width 等于设备宽度了 。

参数意义如下

width=device-width : 强制让viewport 的width 等于设备宽度
initial-scale=1.0  : 页面初始缩放值 ,1.0 即没有缩放
maximum-scale=1.0  : 页面最大缩放值 
user-scalable=no   : 设置页面是否可以被用户缩放,yes 是可以 ,no 是不可以 

(完)

移动端开发-viewport的更多相关文章

  1. 移动端开发viewport深入理解(转)

    一.viewport的概念   移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域 的大小,它 ...

  2. 移动端开发-viewport与媒体查询

    首先要知道,在移动开发中,手机的浏览器会默认网页是为宽屏而设计的,它会缩小整个页面来适应屏幕. 1. 不使用viewport出现的问题 提到响应式设计,大家首先想到的可能是 Bootstrap , @ ...

  3. 移动端开发(一. Viewport(视窗))

    手机与浏览器 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏  ...

  4. (转)移动端开发总结(一)视口viewport总结

    转载链接:移动端开发中,关于适配问题的一点总结(一) 视口 布局视口layout viewport 视觉视口visual viewport 理想视口 缩放 一个重大区别 最小缩放 和最大缩放 分辨率 ...

  5. 移动端适配(rem & viewport)--移动端开发整理笔记(四)

    移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是 ...

  6. web移动端开发技巧与注意事项汇总

    一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, m ...

  7. 移动端开发概览【webview和touch事件】

    作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...

  8. 移动开发viewport

    三种 viewport layout viewport:文档流的 css 宽度,是一个静态的值,使用 document.documentElement.clientWidth 获取,在meta中是 w ...

  9. 移动端开发,几个你可能不知道的CSS单位属性。

    1. rem "em" 单位是我们开发中比较常用到的,它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小:“rem” 中的 “r” 代表 “root”,它表示以根(即“h ...

随机推荐

  1. 记一次SpringBoot使用WebUploader的坑

    问题: B/S通常都会涉及到文件的上传,普通文件上传使用文件框,后台接收文件即可 我遇到的问题是要开发一个大文件上传的功能,那就肯定要支持文件的分片 分析: 1.参考网上的资料后,通常的多文件和大文件 ...

  2. [agc011F]Train Service Planning-[线段树优化dp+神秘思考题]

    Description 传送门 Solution 请围观lhx大佬的博客(大佬写的太好了我都没有写的动力了em) Code #include<iostream> #include<c ...

  3. 探寻ASP.NET MVC鲜为人知的奥秘(1):对LESS的支持

    在ASP.NET MVC3中(从那时开始),我们拥有了对js和css等文件的捆绑(Bundling)和压缩(Minification)的能力,这是ASP.NET性能优化工作的一部分. 想一下很久以前, ...

  4. 微软office web apps 服务器搭建之在线文档预览(二)

    上一篇文章已经介绍了整个安装过程了.只要在浏览器中输入文档转换server的ip,会自动跳转,出现如下页面. 那么就可以实现本地文档预览了,你可以试试.(注意:是本地哦,路径不要写错,类似“\\fil ...

  5. JAVA高级之路----JAVA多线程

    介绍 这段时间一直在学习和整理一些通往java高级程序猿必备的知识点,有些是工作中必须要知道的,有些是面试必须要知道的, 但是不管怎么样,学习了就不会有坏处,不可能全部记得住,最起码得雁过留痕,知识不 ...

  6. Linux checksum flag in kernel

    net_device->feature | NETIF_F_NO_CSUM: No need to use L4 checksum, it used for loopback device. | ...

  7. 《图解 HTTP 》阅读 —— 第四章

    第4章 返回结果的HTTP状态码 1XX 接收的请求正在处理 2XX 请求被处理 200 请求成功 204 请求成功,但是没有返回数据 206 客户端进行了范围请求 3XX 重定向 301 永久性重定 ...

  8. 如何计算FOB价格

    FOB价格是国际贸易术语常有的一种算法,针对不同的对象,FOB价格也有不一样的算法.对于做外贸生意的朋友,需要了解FOB价格以及各项费用名称,以及如何计算FOB价格. FOB价格是国际FOB价格语常有 ...

  9. 动态语言的灵活性是把双刃剑 -- 以 Python 语言为例

    本文有些零碎,总题来说,包括两个问题:(1)可变对象(最常见的是list dict)被意外修改的问题,(2)对参数(parameter)的检查问题.这两个问题,本质都是因为动态语言(动态类型语言)的特 ...

  10. call appiy

    其实就是动态的改变this了,下面例子就说明了... function add(a, b){ console.dir(this); } function sub(a, b){ console.dir( ...