码迷,mamicode.com
首页 > Web开发 > 详细

关于MVC的信息

时间:2015-08-10 00:00:01      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:

  1. 什么是viewport

    简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的手机宽度是320px,还是640px,在手机浏览器内部的宽度,始终会是浏览器本身的viewport。如今的浏览器,都会给自己的本身提供一个viewport的默认值,可能是980px,或者是其他值。就以手机来说吧,目前,新版本的手机浏览器,绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试,经过测试,iphone下的默认viewport为980px,安卓下的浏览器,目前主流的最新浏览器(比如chrome,还有很多国产的像qq,uc)的viewport也是980px了。

  2. viewport是用来干什么的

    viewport的默认值,一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候,可以让桌面端端网页正常显示(我们普通页面设计的时候,一般页面的主区域是以960px来做的,所以980px这个值,可以做到桌面端网页的正常显示)。但是,其实我们手机的屏幕宽度是没有960px的,因此浏览器会出现横向滚动条。同时,即使是基于980的viewport,我们在移动端浏览我们的桌面页面的体验其实也并不好,所以,一般的,我们会专门给浏览器设计一个移动端的页面。

  3. 对viewport的控制

    如今可以绝大部分浏览器里(即主流的安卓浏览器和ios),都支持对viewport的一个控制了。一般的,我们会这么写。

    viewport默认有6个属性

    • width: 设置viewport的宽度(即之前所提及到的,浏览器的宽度详),这里可以为一个整数,又或者是字符串"width-device"
    • initial-scale: 页面初始的缩放值,为数字,可以是小数
    • minimum-scale: 允许用户的最小缩放值,为数字,可以是小数
    • maximum-scale: 允许用户的最大缩放值,为数字,可以是小数
    • height: 设置viewport的高度(我们一般而言并不能用到)
    • user-scalable: 是否允许用户进行缩放,‘no‘为不允许,‘yes‘为允许

    我们把这个标签是在head里面,像这样

    <meta name="viewport" content="initial-scale=1">

    这样就可以做到对viewport的控制了

二. 关于我们的设备

  1. 三个需要了解的概念:

    • PPI: 可以理解为屏幕的显示密度
    • DPR: 设备物理像素和逻辑像素的对应关系,即物理像素/逻辑像素
    • Resolution: 就是我们常说的分辨率
  2. 物理像素与逻辑像素

    看了我们上面内容一的第一点之后,或许有些人会有些疑问,我的安卓手机,或者iphone6plus(目前应该仅限于这一款机型吧),买回来的是1920x1080的或者其他更高的,比我之前所谓的那个viewport默认的980px要大。

    这样的问题,也就是我之前所说的物理像素与逻辑像素的关系了(即DPR)。以1920x1080为例,1080为物理像素,而我们在viewport中,获取到的,比如"width-device",是逻辑像素。所以之前viewport的默认值,所比对的大小,其实是逻辑像素的大小,而非物理像素的大小。

    以iphone6为例,在不做任何缩放的条件下,iphone6的获取到的‘width-device‘为375px,为屏幕的逻辑像素。而购买时我们所知的750px,则为屏幕的物理像素。

  3. CSS的问题

    有了上面第二点的一些基础,还是以iphone6为例,我们可以知道,其实我们所写的1px,在iphone6上为2px的物理像素。所以,最后的,给出一个结论。就是我们写的1px,在移动端,是逻辑像素的1px,而非物理像素的1px。

关于MVC的信息

标签:

原文地址:http://www.cnblogs.com/Andylasy/p/4716685.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!