如何知道手机宽度多少像素屏幕的CSS像素宽度

来源：蜘蛛抓取(WebSpider) 时间：2018-09-06 05:31 标签： 手机宽度多少像素
7天内免登录 没有账号？

请升级为C/D级会员！

  • 第4章 离线Web应用程序

    第6章 Web服务器通信

    第8章 响应式网页设计

    单击鼠标添加时间戳，双击时间戳可删除!

    课程名称：8.4 设备像素和CSS像素

    吧！如果你还没有账号可以

    只有登录才可以发布笔记，快

    吧！如果你还没有账号可以

　　开发移动端H5页面

　　面对不同分辨率的手机

　　面对不同屏幕尺寸的手机

　　在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。

　　对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：

　　首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。

　　对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍(对iphone6而言：原先的375×667，就会变成750×1334)。

　　对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题?

　　对于2倍大小的视觉稿，在具体的css编码中如何还原每一个区块的真实宽高(也就是布局问题)?

　　带着问题，往下看…

　　在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。

　　一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

　　设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

　　所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

　　设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

　　设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

　　(ps: 当然裁剪只是对原图的等比裁剪，得保证图片的清晰嘛~)

　　这大概是设计师最敏感，最关心的问题了。

　　首先得说一下，为什么存在retina下，border: 1px这一说?

　　我们正常的写css，像这样border: 1px;，在retina屏幕下，会有什么问题吗?

　　先来，来看看下面的图：

　　上面两张图分别是在iphone3gs(dpr=1)和iphone5(dpr=2)下面的测试效果，对比来看，对于1px的border的展示，它们是一致的，并无区别。

　　那么retina显示屏的优势在哪里，设计师为何觉得高清屏下(右图)这个线条粗呢?明明和左右一样的~

　　还是通过一张图来解释(原谅我再次盗图)：

　　上图中，对于一条1px宽的直线，它们在屏幕上的物理尺寸(灰色区域)的确是相同的，不同的其实是屏幕上最小的物理显示单元，即物理像素，所以对于一条直线，iphone5它能显示的最小宽度其实是图中的红线圈出来的灰色区域，用css来表示，理论上说是0.5px。

　　然而，无奈并不是所有手机浏览器都能识别border: 0.5px;，ios7以下，android等其他系统里，0.5px会被当成为0px处理，那么如何实现这0.5px呢?

　　最简单的一个做法就是这样(元素scale)：

　　当然还有其他好多hack方法，网上都可以搜索到，但是各有利弊，这里比较推荐的还是页面scale的方案，是比较通用的，几乎满足所有场景。

　　有人担心页面scale后会影响性能，@妙净同学做过性能测试，见这里(内网地址)。

　　看一下实现后的效果图对比(右图为优化过的)：

　　(ps: 图片被压缩过，可能看上去并不明显，可以用手机扫码或者点击这里(内网地址)对比看看)　　

　　然而，页面scale，必然会带来一些问题：

　　页面布局会被缩放(如: div的宽高等)

　　这两个问题后面讲到…

十一、多屏适配布局问题

　　移动端布局，为了适配各种大屏手机，目前最好用的方案莫过于使用相对单位rem。

　　基于rem的原理，我们要做的就是: 针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。

　　这里我们提取了一个公式(rem表示基准值)

　　除以10，是为了取整，方便计算(理论上可以是任何值)

　　所以就像下面这样，html的font-size可能会：

　　对于动态改变根节点html的font-size，我们可以通过css做，也可以通过javascript做。

　　css方式，可以通过设备宽度来媒体查询来改变html的font-size：

　　缺点：通过设备宽度范围区间这样的媒体查询来动态改变rem基准值，其实不够精确，比如：宽度为360px 和 宽度为320px的手机，因为屏宽在同一范围区间内(

　　javascript方式，通过上面的公式，计算出基准值rem，然后写入样式，大概如下(代码参考自kimi的m-base模块)

　　// 设置viewport，进行缩放，达到高清效果

　　// 动态写入样式

　　// 给js调用的，某一dpr下rem和px之间的转换函数

　　这种方式，可以精确地算出不同屏幕所应有的rem基准值，缺点就是要加载这么一段js代码，但个人觉得是这是目前最好的方案了。

　　因为这个方案同时解决了三个问题：

　　说到布局，自然就得回答一下最初的留下的那个问题：如何在css编码中还原视觉稿的真实宽高?

　　拿到的是一个针对iphone6的高清视觉稿 750×1334

　　采用上述的高清方案(js代码)。

　　如果有一个区块，在psd文件中量出：宽高750×300px的div，那么如何转换成rem单位呢?

　　对于一个iphone6的视觉稿，它的基准值就是75(之前有提到);

　　所以，在确定了视觉稿(即确定了基准值)后，通常我们会用less写一个mixin，像这样：

　　所以，对于宽高750×300px的div，我们用less就这样写：

　　转换成html，就是这样：

　　最后因为dpr为2，页面scale了0.5，所以在手机屏幕上显示的真实宽高应该是375×150px，就刚刚好。

　　倘若页面并没有scale 0.5，我们的代码就得这样：

　　这样的宽高，我们往往是这样得来的：

　　将750×1334的视觉稿转成375×667的大小后，再去量这个区块的大小(感觉好傻)。

　　在750×1334量得区块宽高是750×300px后，再口算除以2(感觉好麻烦)。

　　最后给出一张没有布局适配(上图)和用rem布局适配(下图)的对比图：

　　很明显可以看出，rem适配的各个区块的宽高都会随着手机屏宽而改变，最最明显的可以看一下图片列表那部分，最后一张图视觉稿要求只出现一点点，rem布局在任何屏幕下都显示的很好。

　　既然上面的方案会使得页面缩放(scale)，对于页面区块的宽高，我们可以依赖高清视觉稿，因为视觉稿本来就×2了，我们直接量就可以了，那么对于字体该如何处理呢?

　　对于字体缩放问题，设计师原本的要求是这样的：任何手机屏幕上字体大小都要统一，所以我们针对不同的分辨率(dpr不同)，会做如下处理：

　　(注意，字体不可以用rem，误差太大了，且不能满足任何屏幕下字体大小相同)

　　为了方便，我们也会用less写一个mixin：

　　(注意：html的data-dpr属性就是之前js方案里面有提到的，这里就有用处了)

　　根据经验和测试，还是会出现这些奇奇葩葩的dpr，这里做了统一兼容~

　　用的时候，就像这样：

　　当然对于其他css属性，如果也要求不同dpr下都保持一致的话，也可以这样操作，如：

　　上面对移动端H5高清和多屏适配的一些方案总结，和知识讲解，不对的地方，还请指出来，新浪微博 - Lovesueee。

　　加入GAD的核心用户QQ群：，各类活动奖励任你拿，最新资讯任你读，众多教学任你免费学，如此好地方赶紧加入吧！另VR专属群：，专业VR技术分享，专业导师指导为你答疑解惑，大型小型活动奖励等你拿，免费学习赚奖励的天地，欢迎你加入哟！

php、asp、js判断客户端输出对应的样式

/*事实上用asp、php后台判断更保险，js在前端，有可能被用户禁止*/

不判断分辨率，只判断浏览器

实现根据浏览器类型自动调用不同CSS。

只要求判断根据屏幕宽度选择不同的CSS样式表。

我要回帖

更多关于 手机宽度多少像素 的文章

 

随机推荐