H5页面适配所有iPhone和安卓机型的六个技巧
http://www.th7.cn/web/html-css/201605/166006.shtml
http://www.th7.cn/web/html-css/201601/153127.shtml
目前,很多APP设计师小伙伴已经开始转向H5前端开发啦,但是解决所有iPhone和安卓机型的适配问题是我们的重中之重。无论是设计APP还是写前端H5.都是要考虑移动端的兼容性。
25学堂今天跟大家来回顾一下H5页面去适配所有iPhone和安卓机型的一些技巧和办法。
回归正题,兼容iphone各版本机型最佳的方式就是自适应。
1、viewport 简单粗暴的方式: <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
直接设置viewport为320px的1.3倍,将页面放大1.3倍。
为什么是1.3?
目前大部分页面都是以320px为基准的布局,而iphone6的宽度比是375/320 = 1.171875,iphone6+则是 414/320 = 1.29375那么以1.29倍也就约等于1.3了。
2、ip6+ 的CSS media query
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ /*iphone 6*/}@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ /*iphone 6 plus*/}
PS: 也可以直接使用实际的device-width:如 device-width : 375px
在原有页面的基础上,再针对相应的屏幕大小单独写样式做适配。
3、REM布局
REM是CSS3新增的一种单位,并且移动端的支持度很高,android2.x+,ios5+ 都支持。REM是相对于dom结构的根元素来设置大小,也就是html这个元素。相较于em单位,rem使用上更容易理解及运用。
REM与PX的换算可以查看网址: https://offroadcode.com/prototypes/rem-calculator/
假设,html我们设置font-size:12px; 也就是说12px相对于1rem,那么18px也就是 18/12 = 1.5rem。
那么我们以320px的设计布局为基准,将html设置为font-size:100px,即100px = 1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。
REM如何做响应式布局?
1、如果仅仅是适配ip6+设备,那么使用media query就行。
伪代码如下:
/*320px布局*/html{font-size: 100px;}body{font-size: 0.14rem /*实际相当于14px*/}/* iphone 6 */@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ html{font-size: 117.1875px;}}/* iphone6 plus */@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ html{font-size: 129.375px;}}
这样,在ip6下,也就将页面内的元素放大了1.17倍,ip6+下也就是放大了1.29倍。
2、如果是完全自适应,那么可以通过JS来控制。 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 320) + 'px'; }; // Abort if browser does not support addEventListener if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
页面初始化的时候计算font-size,然后再绑定resize事件。这种效果就和百分比布局一样了。
那么用REM做单位与百分比做单位有什么优势?
主要优势在于能更好的控制元素大小。(一般百分比应用在布局层,一般常见设置为50%,33.3%,25%之类的整数居多,难以运用在复杂的页面小部件内)。但是相比百分比布局,需要借助JS或media query实现,略有一点瑕疵。
4、图片自适应
刚说完REM布局,那么用百分比布局也能实现一样的效果,但是用百分比布局,必须要面临一个问题:图片宽度100%,页面加载时会存在高度塌陷的问题。.
如图:页面加载时图片高度默认不存在。
那么可以用padding-top设置百分比值来实现自适应。
公式如下:
padding-top = (Image Height / Image Width) * 100%
原理:padding-top值为百分比时,取值是是相对于宽度的。
相关代码实现:
<div class="cover"> <img src="http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg" alt=""/></div> .cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}.cover img{position: absolute; top: 0; width: 100%;} 5、图片高清化
大家都知道,iphone6 plus 是3倍高清图了,它的devicePixelRatio = 3。
关于DPR的介绍可以查看这篇文章《 设备像素比devicePixelRatio简单介绍 》
在ios8下,已经开始支持img的 srcset 属性了(目前移动端也就ios8开始支持),也就是说,可以对一张图片设置2个URL,浏览器自动加载对应的图片。
黄色表示仅支持旧的srcset规范,绿色表示支持全新的srcset规范,包括sizes属性,w描述符。 这里不展开,详细了解可自行google。
如下DEMO,请切换devicePixelRatio值进行查看:
不过目前前端这边图片的实现基本都用lazyload的方式实现。srcset的图片加载方式在实际项目中运用还比较少。
6、背景图高清化
media query 实现高清化
img标签的高清化,可以通过JS判断devicePixelRatio的值来加载不同尺寸的图片,但是对于背景图,写在CSS中的,用JS来判断就略麻烦了,还好CSS通过media query也能判断dpr。
目前兼容性最好的背景图高清化实现方式,使用media query的 -webkit-min-device-pixel-ratio 做判断:
/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */ .css{ background-image: url(img_1x.png); } /* 高清显示屏(设备像素比例大于等于2)使用2倍图 */ @media only screen and (-webkit-min-device-pixel-ratio:2){ .css{ background-image: url(img_2x.png); } } /* 高清显示屏(设备像素比例大于等于3)使用3倍图 */ @media only screen and (-webkit-min-device-pixel-ratio:3){ .css{ background-image: url(img_3x.png); } }
进一步,可以通过工具生成相应的3x,2x,1x的图片及css,在使用时直接引用即可。谁搞一个?
关于移动设备的 -webkit-min-device-pixel-ratio 值,可以查看该网页的整理: http://bjango.com/articles/min-device-pixel-ratio/
image-set 实现高清化
image-set,它是Webkit的私有属性,也是Css4的一个属性,它是为了解决Retina屏幕下的图像显示而生。
使用方式也很简单。伪代码如下:
.css { background-image: url(1x.png); /*不支持image-set的情况下显示*/ background: -webkit-image-set( url(1x.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */ url(2x.png) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */ url(3x.png) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */ ); }
目前移动端的支持程度来看,ios7+,android 4.4+ 下已经支持了。如果仅仅是做ip6+的高清适配方案。 image-set 也是一种实现方案。
使用image-set 与 media query 实现有什么区别及好处?
这篇文章里面做了很详细的阐述,大家可以看看: http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/
大体的意思是:image-set不需要告诉浏览器使用什么图像,而是直接提供了图像让浏览器选择。这就意味着,如果在低网速下,浏览器可以选择加载低分辨率的图片。(PS:好智能的样子)
但是相比如media query的实现,image-set仅支持单个图片的高清化,不适合在css sprite下使用。 并且兼容性也是一大硬伤。
一般来说,用在LOGO区域,单个图片图标的区域下,也是个不错的选择。
关于图片列表适配,也就是要让布局更灵活,在电商网站里面,商品列表是一个非常常见的结构。 一种比较智能的列表方式是:两端对齐,间距自适应。
那么可以使用FLEXBOX布局来实现两端对齐的效果,也可以使用 text-align:justify 的方式实现。
具体实现办法: http://www.ghugo.com/inline-block-justify/
以上内容是非常适合想要学习H5页面的童鞋们,算是H5页面开发的入门教程。
H5页面适配所有iPhone和安卓机型的六个技巧的更多相关文章
- h5页面适配iPhone X的方法
一.原生适配iphoneX 原生适配很简单,查看机型图: 只要用 #define KIsiPhoneX ([UIScreen mainScreen].bounds.size.height>8 ...
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
- 【原】让H5页面适配移动设备全家 - 前端篇 - PPT
7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同 ...
- 【原】让H5页面适配移动设备全家 - 设计师篇 - PPT
上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前 ...
- h5页面适配小结
大概是去年的7月想写这个内容去加深自己的理解.现在终于回来补上这篇入门小结了. 1.问题描述 适配的目标:在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放( ...
- H5 页面适配几种展现形式
1.contain 模式:以内容中心为基点按照视觉稿的宽高比缩放以适配窗口显示全页面内容,窗口与内容的宽度比或高度比之间较小者缩放填满窗口,当窗口宽高比和视觉稿不同时,另一方向的两侧出现留空部分. 2 ...
- H5 前端页面适配响应式
辞职有半个月了,面试了几家公司,还在挣扎中.... 不废话,H5页面适配成响应式,可以用百分比或者rem. rem是相对于html根元素的单位,可以根据根元素的大小做出等比缩放, 通常,假如设置,ht ...
- 本地调试H5页面
摘要 详细讲述微信H5页面调试(安装在安卓或iOS手机上的),钉钉内H5页面的调试,QQ.微博以及各浏览器上H5页面的调试方法 背景 大学毕业快要一年了,用leader的话说我也是有一年开发经验的前端 ...
- 教你判断一个APP页面是原生的还是H5页面 。(还没看)
来源:https://www.25xt.com/appdesign/11851.html 刚好是周末,无意之间学堂君在收集相关资料的时候,发现有部分童鞋在问<如何判断一个APP页面是不是H5页面 ...
随机推荐
- Eclipse 打开当前文件所在的文件夹
两种方法: 1.安装EasyExplorer插件,有了这个插件就可以很方便地打开资源文件所在的文件夹了. EasyExplorer 从 http://sourceforge.net/projects/ ...
- Sql Server 表创建以及Ef浅谈
1.在数据库中新建两张测试表 创建用户表 use eftest go if exists(select * from sysobjects where name='UserInfo') drop ta ...
- 验证码计时 -- UIButton setTitle 闪烁问题解决方案
首先,有各种版本 方法一: 我运用的一种极其简单的版本: 将UIButton的Type 设成 Custom 就不会有闪烁的问题重现 p.p1 { margin: 0.0px 0.0px 0.0px ...
- kinect2 body joints 的25个点
JointType_SpineBase = 0, JointType_SpineMid = 1, JointType_Neck = 2, J ...
- java复习-多线程
和线程之间的关系: 进程:进程是程序的一次动态执行过程,他经理了代码加载,执行到执行完毕的一个完整过程,这个过程也是进程本身从产生,发展到最终消亡的过程. 线程:线程是实现并发机制的一种有效手段,进程 ...
- Oracle第二天
Oracle第二天 整体安排(3天) 第一天:Oracle的安装配置(服务端和客户端),SQL增强(单表查询). 第二天:SQL增强(多表查询.子查询.伪列-分页),数据库对象(表.约束.序列),Or ...
- team viewer - rollback framework could not be initialized
rollback framework could not be initialized, 在安装team viewer 的时候出现的这个错误信息,求大师帮忙 https://zhidao.baidu. ...
- 《JS中的面向对象技术》
内容要点: 1.什么是对象:JS权威指南学习总结-第六章 ,(有句话:一切都是对象) 2.什么面向对象 使用对象时,只关注对象提供的功能,不关注其内部细节,比如jQuery.面向对象是一种通用思想,并 ...
- windows网络编程(1)同步套接字
1.socket是应用程序与网络驱动程序的桥梁,在应用程序中创建socket,将数据交付给socket即完成数据传输,剩下的任务由socket和网络驱动程序完成: 2.套接字类型:SOCK_STREA ...
- MongoDB数据模型(二)
原文地址 接上一篇 四.模型树结构 父引用的模型树结构 这个数据模型描述了一个树形结构,在子节点中存储父节点的引用. 模式 父引用模式存储每个树节点到文档中,除了树节点外,文档还存储了父节点的id. ...