android适配

移动端开发中，关于适配问题的一点总结(一) 转自：http://www.jianshu.com/p/3a5063028706?nomobile=yes 我们第一次接触移动web的时候，直观印象样应该是：屏幕比pc小很多，所以对pc端设计的界面，不一定（或者说不完全）能很好的适用到移动端。 下面这段代码，做过移动端项目的同学一定不会陌生。 假设你已经见过上面的代码，并有所应用，对响应式设计如何工作有大概的了解，但不一定清楚一些细节。最近在做一个移动端的项目，要求做到精确还原设计稿，像素级。现在我把自己的一些心得分享出来，给大家参考。下面我就关于 像素，视口，分辨率，meta视口 相关的内容展开叙述。 要实现像素级还原，首先我们要搞清楚什么是像素。 #像素 像素(pixel) 是网页布局的基础，web开发者，包括设计师，凭直觉去使用它。我们好像对它很熟悉，但依然还有很多关于这个基础构建模块的东西需要我们去学习。例如，一个像素到底是什么。 乍一看，这似乎是个非常简单的问题，一个像素就是计算机能够显示一种 特定颜色 的最小区域。屏幕上像素越多，你就看到的越多。或者说，同样尺寸的设备，像素越多，效果就越细腻。 对于开发者来说，给一个元素设置 width : 200px ;会发生什么事情呢？ //废话 lol ，就是给它设置宽度200px 呗，stupid question..

1 为什么要进行Android屏幕适配 由于 Android 系统的开放性，任何用户、开发者、 OEM 厂商、运营商都可以对 Android 进行定制，于是导致： Android 系统碎片化 ： 小米定制的 MIUI 、魅族定制的 flyme 、华为定制的 EMUI 等等——当然都是基于 Google 原生系统定制的； Android 机型屏幕尺寸碎片化 ： 5 寸、 5.5 寸、 6 寸等等； Android 屏幕分辨率碎片化 ： 320x480 、 480x800 、 720x1280 、 1080x1920。 屏幕尺寸分布图 据友盟指数显示，统计至 2015 年 12 月，支持 Android 的设备共有 27796 种。 当 Android 系统、屏幕尺寸、屏幕密度出现碎片化的时候，就很容易出现同一元素在不同手机上显示不同的问题。 虽然系统为使您的应用适用于不同的屏幕，会进行缩放和大小调整，但您应针对不同的屏幕尺寸和密度优化应用。 这样可以最大程度优化所有设备上的用户体验，用户会认为您的应用实际上是专为他们的设备而设计，而不是简单地拉伸以适应其设备屏幕。 2 相关概念 2.1 屏幕尺寸 含义：按屏幕对角测量的实际物理尺寸。 为简便起见， Android 将所有实际屏幕尺寸分组为四种通用尺寸：小、 正常、大和超大 单位 : 英寸（ inch ），一英寸≈ 2.54cm 2.2

移动端Web页面适配方案 移动端字体大小 移动端适配 移动端web bolelee 3月20日发布 赞 | 6 收藏 | 67 6.3k 次浏览 更新：完整 js 代码和 sass mixin 已上传于gitHub， 点击此处可获取 =================================================== 移动端Web页面，即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。 适配的目标 引用一文章的描述： 在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。 概念理解 在做适配之前，需要先理解一些概念。对于不理解的地方，可以搜索更多文章看看，本文总结的也是摘抄了其他文章的描述，本文末有附相关链接。 viewport视口 viewport是严格的等于浏览器的窗口。 viewport 与跟 viewport 有关的 meta 标签的关系，详细建议读一读这篇文章： 移动前端开发之viewport的深入理解 ， viewport 与布局的关系，可以看下这篇文章： 在移动浏览器中使用viewport元标签控制布局

虽然说本人是做前端开发的,但是也开发过几个Android项目,还是比较关注移动端的,个人感觉以后用网页开发手机App是一种趋势,h5的兴起也正说明了这一点,也正是有了h5,让前端开发者也能开发手机,好了,废话不多说,进入正题,对网页的适配手机本人暂时用到了3中方式,3句代码, 第一句: < meta name = "viewport" content = "width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" > 暴力手段,强制让网页适配手机.就是说如果你用设计了一个网页,然后加入这句代码,那么你网页上所有内容都挤在手机小小的屏幕上,这种方式本人一般用于网页上的header和table; 第二句: font-size : 1.3rem; 可能刚接触前端的对rem可能不是很熟,但是,如果你想倾向于网页开发App这一块,那么rem就是很重要的一块,对于px我相信没有人不认识,我们用px给文字设置大小的时候,不管你页面怎么放大缩小,字体大小都不会改变,而用rem设置大小,字体大小就会随之缩放而改变,想要真正了解rem原理的百度更详细. 第三句: width :90 % 设置页面各个标签的宽度大家都会,但是一般的用px绝对定位,假如用%,那么你的标签就不会超过你页面的宽度.简单的方法

这篇文章，我们来研究一下手机H5页面适配不同手机分辨率的问题。 众所周知，手机分辨率自从Android面世以来简直是醉了。320*480、480*800、480*856等等等。苹果公司又出了5，5S，6 ，6+，这样手机的分辨率更多了。 废话不多说，说一下适配方法。 第一种，就是将所有标签的 width设置为100%，所有div的css background 都改成img 便签。 但这种方法真心不是很优秀，而且如果该页面的高度 要求在手机显示屏可以完全显示出来，或者说不需要用户滚动该页面，上面的方法就不行了。 第二种方法就是 固定一个div宽度为320px，其他所有元素都是这个div的子元素，定位问题都是用position:absolute，然后通过获取运行页面浏览器的宽度，使用js代码为这个最外层的div添加scale。 参考代码 如下： var t = function() { setTimeout(function() { var t = document.documentElement.clientWidth, e = document.documentElement.clientHeight, n = (t / 320).toString().substring(0, 6), i = (e / 568).toString().substring(0, 6), r = n;

我在另一篇文章中谈到过一些 移动端分辨率自适应问题 ，主要是基于个人实际开发中遇到的问题提出的解决方法。 近期有幸听到他人对移动web开发的分享，特来补充上一篇文章，向大神讨教。 Part 1 理解关于长度单位的一些概念 1、设备像素或逻辑像素 指设备能控制显示的最小物理单位，意指屏幕上一个个的点 （还是不理解？？太正常了，接着往下看） 2、CSS像素或设备独立像素 指CSS样式代码中使用的逻辑像素，即px（在iPhone中单位为pt） （这个好理解吧） 3、像素密度（PPI） 指设备能控制显示的最小物理单位，意指屏幕上一个个的点 （嘻嘻，=设备像素或逻辑像素） PPI越高，分辨率也就越高 4、像素比（dpr） 设备像素比=设备像素/CSS像素 比如：iPhone6的像素比为2 = 750/375 在开发中，UI设计狮以设备像素制作设计图； 前端攻城狮把设备像素按照像素比进行换算，得到CSS像素，以此为单位制作网页 进一步举例理解，在普通屏和2dpr下，css像素和设备像素的情况 以下两种情况都会带来一定的图片不正常的问题 Part 2 关于视口的概念 1、Layout viewport（布局视口） 浏览器默认设置了一个viewport 元标签，定义一个的虚拟视口，用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px

移动开发不同与PC端开发，可能会经历各种意想不到的问题，尤其是移动端应用刚起步的几年；随着移动互联网的快速发展，有些问题已经得到了很好的支持，如1像素边界的问题。当然，要更好地解决这些移动端的问题，就需有移动端领域相关的知识，下面就来说说。 dpr设备像素比 首先说一下，这个dpr不仅仅是移动端才有的，pc端也有，但是对一些移动端的问题产生的原因及解决显得比较重要，比如1像素的问题。先来看几个概念： 物理像素（physical pixel） 一个物理像素就是显示设备上最小的物理显示单元，每个物理像素都有自己的颜色值和亮度值。例如iphone6手机屏幕有750*1334个物理像素 设备独立像素（density-independent 设备独立像素又叫密度无关像素，也可以叫逻辑像素，程序使用的虚拟像素如css像素，可以理解为显示设备坐标系统中的一个点； 设备像素比dpr（device pixel ratio) 设备像素比，简称dpr，定义了物理像素与设备独立像素之间的对应关系，具体的对应关系是一个计算公式如下： dpr = 物理像素 / 设备独立像素 上面计算的dpr是指某一个方向上如x或者y方向，二者dpr值相同；程序中获取dpr方式如下： js获取dpr使用 window.devicePixelRatio css获取dpr使用 -webkit-device-pixel-radio

不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。 我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。but，我们要对于市面上的手机各式各样的分辨率进行适配，刚接触移动端开发的时候是不是有点猝不及防哈哈，尤其是去年年中以前老版本的微信内置浏览器用的X5内核，给网友们戏称移动端IE... 今天的主题是讲的是我对移动端多终端适配的解决方案和移动端适配的有关布局的知识总结，下面正式开始。 基本概念和原理 首先要了解的重要的基础知识点：物理像素，设备独立像素，设备像素比，css像素，布局视口，可视视口,理想视口以及css单位rem。 物理像素（设备像素） 屏幕的物理像素，又被称为设备像素。任何设备屏幕的物理像素出厂时就确定了，是固定不变的。 设备独立像素 设备独立像素也可以理解为CSS像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。 设备像素比 设备像素比简称为dpr

阿里P7移动互联网架构师进阶视频（每日更新中）免费学习请点击： https://space.bilibili.com/474380680 本篇文章将推荐一种非常好用的Android屏幕适配: 更新：由于该适配方案越来越多人使用，也有很多人遇到不太理解的问题。所以为了大家更好的使用，我将文章很多内容更新了，老用户可以重新看下整篇文章。主要更新的内容是使用方法跟以前不同了，以前是不改变最小宽度基准值，根据 UI 图来计算布局中设置的值。现在改成最小宽度基准值与设计图一致，然后设计图标注多少 dp 就写多少 dp，非常方便。还整理了评论区比较多人问到的问题作统一回答。 前言 网上关于屏幕适配的文章已经铺天盖地了，为什么我还要讲？因为网上现在基本都是使用 屏幕分辨率限定符 进行适配，即每种屏幕分辨率的设备需要定义一套 dimens.xml 文件。由于不同分辨率的设备太多了，而且有些设备还有虚拟按键（例如华为手机），这样就还需要每个有虚拟按键的设备加多一套 dimens.xml 文件，再加上平板那些你会发现 dimens.xml 文件所占的体积已经超过2M了！这绝对不是我们想要的。 我这里要讲的是使用 sw<N>dp限定符，即 smallestWidth（最小宽度） 限定符 来进行适配，使用这种方式只需要少量 dimens.xml 文件即可达到适配，而且根本不用考虑虚拟按键的问题

页面中那些内容需要适配 一、图片高清适配 图片适配的目的是为了在页面中可以高清还原设计图中用到的图片。 页面中用到的图片是否清晰和展示页面的硬件设备的dpr以及图片分辨率这两个因素有关，下面会通过三个例子来说明这个问题。 1、示例一 例如dpr=2的设备，1个设备无关像素(android中的1dp，ios中的1pt)需要4个设备物理像素点填充。对于尺寸为100 x 120 (px)的图片，如果用 <img> 来展示，图片显示时会产生模糊现象。 原因：渲染图片时，宽度是100px，所以横向会占用100个设备无关像素，高度是120px,所以纵向会占用120个设备无关像素，每个设备无关像素又需要2x2个物理像素点来填充，而图片在每个设备无关像素(px)单位上提供的像素点只有1x1个，这时，系统通过一定的算法在这1个像素点上就近取色，取到4个颜色(这4种颜色接近但是有一定区别)之后，当成4个像素点，然后填充到1个设备无关像素点上，这样就导致图片显示时模糊，dpr越大，这种方式显示的图片越模糊。 2、示例二 还是dpr=2的设备，但是准备了一个尺寸为200 x 240 (px)的图片，还是用 <img> 来展示，这时显示的图片就比较清晰了。 原因：这时图片本身可以在一个设备无关像素单位上提供2x2个物理像素点，设备展示图片时直接拿图片提供的像素点来填充就可以了，不用对像素点进行处理