8被浏览804分享邀请回答53 条评论分享收藏感谢收起2添加评论分享收藏感谢收起写回答移动端开发中，关于适配问题的一点总结(一) - 简书
移动端开发中，关于适配问题的一点总结(一)
我们第一次接触移动web的时候，直观印象样应该是：屏幕比pc小很多，所以对pc端设计的界面，不一定（或者说不完全）能很好的适用到移动端。下面这段代码，做过移动端项目的同学一定不会陌生。
假设你已经见过上面的代码，并有所应用，对响应式设计如何工作有大概的了解，但不一定清楚一些细节。最近在做一个移动端的项目，要求做到精确还原设计稿，像素级。现在我把自己的一些心得分享出来，给大家参考。下面我就关于像素，视口，分辨率，meta视口 相关的内容展开叙述。要实现像素级还原，首先我们要搞清楚什么是像素。#像素像素(pixel) 是网页布局的基础，web开发者，包括设计师，凭直觉去使用它。我们好像对它很熟悉，但依然还有很多关于这个基础构建模块的东西需要我们去学习。例如，一个像素到底是什么。乍一看，这似乎是个非常简单的问题，一个像素就是计算机能够显示一种特定颜色的最小区域。屏幕上像素越多，你就看到的越多。或者说，同样尺寸的设备，像素越多，效果就越细腻。对于开发者来说，给一个元素设置 width : 200会发生什么事情呢？//废话
lol ，就是给它设置宽度200px 呗，stupid question..但要注意的一点是，这里定义的200px 并不是上面提到的设备像素。
像素分为两种：1.CSS像素：为web开发者创造的，在CSS 和JavaScript 中使用的一个抽象的层。2.设备像素： 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。width : 200 这个声明 表示，这个宽度为200px的元素跨越了200个CSS 像素，200个css像素相当于多少个设备像素取决于屏幕和用户的缩放，比如，在苹果的视网膜设备上，以5s为例，其像素密度是普通屏幕的两倍，那这个元素就跨越了400个设备像素。如果用户放大，那它将跨越更多的设备像素。我们使用的时候，只是去定义它的css像素尺寸就行了，关于它用了多少设备像素，就不是我们去计算了，浏览器会进行计算的。＃视口
我们一直在使用这行代码，但是这样写有什么用 ？
加了这个和不加这个到底有什么区别？要解释这个问题，我们首先要了解一个概念 - 视口在解释视口之前，我们先回顾一下CSS的基础：css中，在没有声明任何宽度时，每个块级元素的默认宽度都是100% 。那这个100% 是相对于什么的100% 呢？ 对了，是它父元素的100% 。 每一个css百分比都是根据它的父元素的宽度来进行计算的，所以宽度为父元素 宽度的100% ，本质是：
这里，div.aside占用了它的父元素 body 宽度的100％，但我们没有给body 定义宽度，因此，它占用了它的父元素，也就是html 宽度的100% 。但，我们同样也没有给它定义宽度。因此，它占用的是它的父元素宽度的100% ;那html 的父元素是谁呢 ？这就是要说的 视口了。在CSS文档中，它叫做 初始包含块。这是百分比计算的根源，它给css布局限制了最大宽度。在pc 浏览器中，视口的宽度 和浏览器窗口的宽度是一致的（先不管margin 和padding）,html ,body 元素的宽度都和浏览器窗口的宽度一致。测试走起：
测试结果表明上面的叙述是对的，这不是什么开创性的发现，只是方便下面的讲述。布局视口小屏幕的移动端设备，主要是手机和部分平板（屏幕特别巨大的除外＝ ＝ ），如果让视口的宽度和浏览器宽度 保持一致的话，会导致一个结果-------页面很丑。手机，平板，浏览器的宽度一般在240-640像素之间，而大...大多数给pc设计的宽度至少为800，一般是960，或者1080。因此，如果用手机去看刚才的那个页面，宽度20%的aside将会非常窄。如图：
一个为桌面设计的网站 在780～ 1260px
的视口中应该会显示的很好，20% 宽度的元素也会大致像设计师希望的那样。如果移动端的浏览器也能展示为pc设计的网站，大家一定会很开心。但是这是有代价的，如上图，如果移动端浏览器遇到了没有为移动端做优化的网站，它会尽可能的缩小网站让用户看到网站的全貌。所以就显得很挤，字体很小，阅读性很差。
这样用户就只有通过放大，去看想看的信息。在手机上，视口与移动端浏览器屏幕宽度不再关联，而是完全独立的了。这个视口，叫布局视口，css布局会根据它来计算，并被它约束。如图：
左图是在chrome 中放大之后的效果，图右是在手机中，放大后的效果，仅为说明两个视口的关系。 视觉视口字面意思，它是用户正在看到的网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。一般情况下，视觉视口对于开发人员来说并不是那么重要，到那时如果有需要看到用户正在看什么区域的需求，可以用js来获取。##理想视口首先来解释一下这个概念默认情况下，移动设备的布局宽度为768～1024像素，虽然这能让桌面网站不被压扁，但这并不是理想情况，尤其是对于小屏幕的使用者，因为在狭小的屏幕上，更适合狭小的网站。简单的说，就是，布局视口的默认宽度并不是一个理想的宽度。这就是 苹果 和其他效仿苹果的 浏览器厂商 引进理想视口的原因。理想视口，对设备来讲，是最理想的视口尺寸。显示在理想视口中的网站拥有最理想的宽度，不需要缩放。但，只有当网站是手机（或者平板）的时候，才应该使用理想视口。所以，这行代码：
就是告诉浏览器，我要使用理想视口了。让布局视口的宽度和理想视口的宽度一样。哦，对了，只有我们人为添加这段代码，理想视口才会生效，否则，布局视口将会维持默认宽度。
缩放首先，什么是缩放...从技术上讲，缩放就是放大或者缩小css像素的过程。典型的例子就是我在手机上浏览pc端的网站，放大一点，好看清字。但是，这个缩放会影响页面上的所有元素。比如，宽度为200px的元素占用了200个css像素，由于这些像素被放大了，这些像素就跨越了更多的物理像素，缩小则相反。css像素的尺寸缩小了，跨越的设备像素也就少了。所以，缩放会影响视觉视口的尺寸。放大会使视觉视口变得更小，我们看到的内容就越少，因为屏幕上显示的css像素更少了。缩小则会使视觉视口变的更大，使我们看到更多的部分。因为屏幕上css像素更多了。所以，缩放程度和视觉视口的大小是逆相关的：缩放程度越大，视觉视口越小。一个重大区别在手机上，布局视口不会被缩放。但是在pc上会，因为它的布局视口和视觉视口大小是一样的，不可能改变一个的同时，另一个不会变。要注意的是：移动端的缩放虽然不会导致css布局被重新计算，但是频繁的操作会给cpu比较大的负担，耗电快，因此不重新布局对性能有很大好处。##最小缩放 和最大缩放initial-scale=1,maximum-scale=1"如果允许缩放，那用户可以缩放到什么程度呢 ？在手机上是5个因子， 换句话说就是20% － 500%。但是安卓-webkit-不大一样,不管有没有meta指令，它的缩放范围都是4个因子（25%－400%）;我们可以通过:
来禁止用户缩放。分辨率分辨率有两个含义。1.设备每英寸的点的个数。2.CSS 和 JavaScript 中也有分辨率的概念，不过他们并不是一回事。物理分辨率dpi所有的屏幕都有物理分辨率，衡量单位为DPI ,（dots per inch）.DPI 越大，画面越清晰。另外要注意的一点，web开发者不可能知道物理分辨率，因为没法获取这个信息。有些手机通过screen.width暴露设备像素个数，但这在不同浏览器之间是不可靠的。无论如何JavaScript 都无法获取设备的物理尺寸。##设备像素比 dprJavaScript 中，有个属性，window.devicePixelRatio ，CSS也有device-pixel-ratio 和分辨率的媒体查询，但是它们都是和物理分辨率无关的。取而代之的是，他们提供了设备像素个数和理想视口的比，成为设备像素比，device pixel ratio,简称DPR。官方文档的描述如下：
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips。dips:device-independent pixels设备独立像素，就是独立于设备之外的像素，也就是css像素。比如：5s的物理像素为640px, CSS像素为320px,那 pdr = 640/320 = 2.DPR不一定是整数,比如BlackBerry Z10 的宽度是768px 物理像素；CSS像素为342px,因此，它的dpr 大约为 2.25.#meta视口meta 视口标签 存在的目的
主要是 让布局视口的尺寸和理想视口的尺寸匹配。Apple 发明了这个标签，其他的厂商复制了它的大部分内容。meta 标签应该被放在&head&中，并按以下格式书写：&meta name="viewport" content = "name= value,name = value"&每一个名/值 都是一个给浏览器的指令，以逗号分隔，常用的有5个：width设置布局视口的宽度，为一个正整数initial-scale设置页面的初始缩放程度 和布局视口的宽度minimum-scale允许用户的最小缩放程度，为一个数字，可以带小数maximum-scale允许用户的最大缩放值，为一个数字，可以带小数user-scalable是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许完美的meta 视口在safari中，当设置initial-scale= 1 时，理想视口的尺寸会随着屏幕的旋转改变。在竖屏时，布局视口的宽度是320px ,横屏下，是480px 或者568px.但在ie10中却有完全相反的问题：initial-scale = 1
时，在横屏模式下宽度也保持为320px ,但width = device-width 时，它会从320px变为480px.所以为了在所有浏览器上解决类似的问题，我们需要如下写法：
字体和尺寸有了上面的理论基础，我们就能愉快的处理移动端尺寸的问题了。移动端的尺寸，主要是间距，宽高，字体，和图像 的尺寸。由于移动设备千差万别，如何才能保证效果呢？来看一下淘宝：
要注意的有三点：1. html
头部meat标签中的DPR2. width,height 的 rem 3.font-size 的rem：font size of the root element，那么rem是个单位，单位大小由根元素font-size的大小决定。关于动态修改font-size,具体的做法，可以参考 ,这里不再赘述。解决移动端尺寸问题的关键就是根元素的尺寸问题。现在普遍的做法是动态修改根元素的font-size,这样rem 会随着设备的变化有着不同的参考值，那尺寸问题就迎刃而解了。除了使用rem,另一种做法是使用来解决适配问题，这里暂时就不讨论了。还有一个是字体的问题，用一幅图表达就是：
字体的问题说大不大，说小也不小，关乎到用户体验，马虎不得。在字体的设置上，不推荐使用rem。我的做法是根据DPR 设置字体。当然，在开发的时候，我们不用手动去做这件事，可以借助来解决。如果不想用gulp，也可以使用scss 来解决。我简单定义了一下字体的mixin,基本能用，也给大家看看吧，欢迎拍砖。
也可以这样：
可以这样用：
生成的代码：
也可以看看了解webapp 中有关字体的更多信息。ios、android 等是不支持微软雅黑字体，为了满足产品的需要，保证视觉稿的还原度，手机端是如何定义微软雅黑字体呢？大家可能会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载.
但是这样做有两个比较突出的问题：1.中文字库文件往往很大，一来消耗用户的流量，二来对页面的打开速度造成了延迟。2.虽然可以用字蛛这样的工具去提取用到的字体，但是不方便后期维护。ios 系统默认中文字体是默认英文字体是默认数字字体是HelveticaNeue无微软雅黑字体android 系统默认中文字体是Droidsansfallback默认英文和数字字体是Droid Sans无微软雅黑字体winphone 系统默认中文字体是Dengxian(方正等线体)默认英文和数字字体是Segoe无微软雅黑字体做了个小测试，下图为测试机 iphone 5s、三星 GT-N7000 android 2.3.6、HTC windows Phone 8.0 三种手机中的默认中文字体和英文字体展现：
可以看出三种不同的中文字体和微软雅黑一样是，有无衬线只是一个小原因，而无论页面中使用哪种字体，肉眼很难看出它们的差异，对产品的体验几乎没有影响。有关衬线字体和无衬线字体的差别，参考下图：
使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别。结论：各个手机系统有自己的默认字体，且都不支持微软雅黑.如无特殊需求，手机端无需定义中文字体，使用系统默认.英文字体和数字字体可使用 Helvetica ，三种系统都支持.body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-}
iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi（中文名称叫黑体-简）。设计时候一般用华文黑体来代替，两者差异微小。#结语第一、首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。第二、使用 &meta name="viewport" content="width=device-width, initial-scale=1"&来得到一个理想视口。第三、市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 320、360、384、400等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。第四、使用rem 处理尺寸，使用font-size处理字体。最后的最后，由于本人还是前端路上的小菜鸟，见识有限，才疏学浅，有表述错误的地方，还请指正，以上。附参考资料：推荐：
指尖上的精彩
一、meta标签的效果 移动端页面一般会在head头部添加如下meta标签。 该meta标签是否添加对页面渲染的影响在移动端，未添加该meta标签时，html元素的宽度一般为980px；添加该meta标签之后，html的宽度与设备物理尺寸宽度一致。 二、几个名词和单位 设备...
在移动互联网快速发展的今天，手机的种类和尺寸越来越多，作为前端的小伙伴们可能会越来越头疼，但又不得不去适配一款又一款的新机型。对于移动端适配，不同的公司、不同的团队有不同的解决方案。我在项目中也用了一部分解决方案，也看到了一些解决方案，对比下，总结一些自己的理解，希望对各位...
刚开始做移动端web开发的同学应该都碰到过页面适配问题，为什么我在开发手机上调试好的页面在其他手机会有这样或那样的样式问题？viewport我也设置了，为什么还是显示不正常？难道我要为每种手机屏幕写媒体查询，有没有简单的方式，可以不用关注手机屏幕的差异性呢？ 百度中搜索移动...
问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 {margin...
CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)&!DOCTYPE htm...
(1) 曾在知乎上曾经回答过一个关于母亲被家暴该怎么办的问题，豆豆觉得我是一个比较好的倾听者，便私信我要了联系方式。于是她开始向我埋怨自己的父亲嗜酒如命，痛诉母亲遭受的折磨，以及告诉我自己过得如何压抑不快乐。起先我本着所谓的人道主义精神，尽可能的给她安慰，鼓励她认真生活，从...
花了巨资培训，业绩还是上不来？
昨天下午，路过F面包店，顺便进去想买点香芋面包切片。刚进门，员工齐声高喊“欢迎光临，美味相伴！”。仔细一看，员工的着装已经换新款，店内也重新做了布置，好像是焕然一新的感觉！只是店内除了员工和我这个准客户，没有其他客户了。我像一往一样绕了一...
帘外雨稀明，独坐危楼，闻云雾空鸣；偶作痛，惊回梦，止千里寒霜泪。——虻、
梦境是如此的真实，真实到不由自主的抽泣，日，10月20日，亦或日。 日 梦回高四，重遇一个班，他还了我本书，我没想到他也会回来，梦中好像没说什么话。 为什么我对此念念不忘？
在西安，西工大附属中学是毫无疑问是无数家长和学生共同的向往，只要踏进这所学校的校门就意味着你提前拿到了二本以上大学的录取通知书，西工大用其变态的高考上线率征服了西安人，成为了西安五大名校之首。 学校聚集了各类省市领导子女，从公办学校转为民办学校，“合理收取”择校费，手眼通天...他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)js实现适配不同的屏幕大小
转载 & & 作者：语潸雪
本文主要介绍了通过js适配不同的屏幕大小的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
话不多说，请看代码：
// 通过js适配不同的屏幕大小
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientW
if (!clientWidth)
// 根据设备的比例调整初始font-size大小
if(clientWidth&640) clientWidth = 640;
docEl.style.fontSize = 50 * (clientWidth / 320) + 'px';
if (!doc.addEventListener)
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}