在工作中接到H5项目,第一件想到的事就应该是屏幕适配问题,解决了屏幕适配,接下来的事才能真正开始。从此篇博客开始会连续记录下我经常用到的一些适配方案。
对于传统的PC项目,直接在移动端打开也都是会以视口980来自动缩放以显示主内容在屏幕内,既然有这么个特性,那自然适配也就可以通过通过控制视口来达到适配的目地。
以下是我工作中经常用到的第一种移动端适配方案:
<!DOCTYPE html> <html> <head> <title>适配方案1</title> <meta charset="utf-8"> <meta content="width=640,user-scalable=no,target-densitydpi=device-dpi" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style> body{ margin:0; } .wrap{ width:640px; overflow:hidden; line-height:36px; font-size:24px; } .aside_left,.aside_right{ width:320px; height:160px; float:left; color:white; line-height:160px; font-size:30px; text-align:center; } .aside_con{ width:640px; height:160px; background:blue; color:white; line-height:160px; font-size:30px; text-align:center; } .aside_left{ background:red; } .aside_right{ background:green; } </style> </head> <body> <div id="wrap" class="wrap"> <!--示范结构 S--> <div class="aside_con"> <div class="aside_left">示范块内容0</div> <div class="aside_right">示范块内容1</div> </div> <div class="aside_con">整条示范内容2</div> <!--示范结构 E--> </div> </body> </html>
适配说明:
1:它使用了viewport视口的特性,手机会保证内容在一个视口内显示,把视口设计成你设计稿的宽度,如当你设计稿是640的时候你就按640PX宽来布局,如果是750的你就按750PX来布局,里面全用像素单位,回归到了PC的像素单位时代
2:主要的适合用在一些移动端的活动宣传页,要求上线快,下的也快的那些页面,即保证了速度也保证了开发成本,用来做功能页也是问题不大的
3:有一定的兼容风险,如果只是在微信里用的,这种适配方式就是你的菜,如果要兼容安卓低版本的一些手机原生浏览器,那这种适配方式不太适合。
我有遇到的一个场景是:公司的宣传页不但要放在微信里宣传,而且还要内嵌放到安卓APP里宣传,而安卓APP是调用手机的默认浏览器的,
虽然target-densitydpi=device-dpi是来解决安卓低版本兼容的,但是还是会有一些小差距,并不能保证内容在一屏宽度内,而且浏览器还能手动缩放,
当时不得已修改方案,考虑到修改的大小,后面使用适配方案2来解决的
以上代码归属于我的github常用H5代码整理项目(详见其中adaptationMode/mode1/index.html):https://github.com/xw5/mobile-code/
如果要做整屏切换效果,需要做一些CSS配合
代码如下:
<!DOCTYPE html> <html> <head> <title>适配方案1全屏</title> <meta charset="utf-8"> <meta content="width=640,user-scalable=no,target-densitydpi=device-dpi" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style> /* 整屏适配必须需要的样式 S*/ html,body{ width:100%; height:100%; overflow:hidden; } .wrap{ width:640px; height:100%; overflow:hidden; background:url(bg.jpg) no-repeat center 0; -webkit-background-size:cover; background-size:cover; } /*整屏适配必须需要的样式 E*/ *{ margin:0; padding:0; } .wrap{ line-height:36px; font-size:24px; color:#fff; } .aside_left,.aside_right{ width:320px; height:160px; float:left; color:white; line-height:160px; font-size:30px; text-align:center; } .aside_con{ width:640px; height:160px; background:blue; color:white; line-height:160px; font-size:30px; text-align:center; } .aside_left{ background:red; } .aside_right{ background:green; } </style> </head> <body> <div id="wrap" class="wrap"> <!--示范结构 S--> <div class="aside_con"> <div class="aside_left">示范块内容0</div> <div class="aside_right">示范块内容1</div> </div> <!--示范结构 E--> </div> </body> </html>
整屏适配说明:
此处是常用的专题页整屏适配,整屏的话需要设置html,body{100%;height:100%;oveflow:hidden;}去掉X&Y方向滚动条,同时通过把背景大小设置为background-size:cover;来保证背景占满整屏,同时使用background-position:center 0;来保证背景居中,左右裁剪,背景本身是装饰裁剪也无大碍的,此适配的需要把主内容尽可能的居中,以避免被裁剪掉
以上代码归属于我的github常用H5代码整理项目(详见其中adaptationMode/mode1/fullscreen.html):https://github.com/xw5/mobile-code/
欢迎clone,欢迎star,一起学习,一起进步!