摘要:本文主要介绍了Webapp自适应方案,此次方案的优化点 页面元素会随宽度的变化而自适应的放大和缩小,和原来不同的是,全页面的高度、字体都会随宽度变化,保持同比例的变化,保证页面不会变形。页面样式只需要写一套CSS布局即可。 对于无法获取到屏幕宽度的手机(极少数个例),我们也可以通过自定义的模式添加支持,希望对大家学习,webapp有所帮助。
此次方案的优化点
· 页面元素会随宽度的变化而自适应的放大和缩小,和原来不同的是,全页面的高度、字体都会随宽度变化,保持同比例的变化,保证页面不会变形。页面样式只需要写一套CSS布局即可。
· 对于无法获取到屏幕宽度的手机(极少数个例),我们也可以通过自定义的模式添加支持
统一布局规则
1. 内部布局统一使用px作为单位,可以根据视觉稿来还原;
2. 字体也使用px,可以保持和其他的元素的相同的放缩比例,不要采用em,或者rem,因为目前没有根据device-width来设定根节点的默认字体,使用rem会随浏览器本身差异而变化,不可控;
3. 图片资源,根据设计的提供的资源情况而定。一般资源可根据宽度加载不同的图片资源的方案。icon类资源,按建光的方案,使用icon fonts;
4. 列表和表格较多,可以考虑是否需要加入Pure.css来绘制表格;
可能存在的问题
· border的宽度,设定为1px,在Retina屏幕上可能会显示2个像素。
· 有的宽高比不正常的手机,大部分页面可能会因为高度略高而垂直可滑动,我们的页面基本垂直都是可以滑动的,这个方案可以通过设定高度可以解决,但是也会影响显示效果。
前提准备
最初执行一段判断代码,iOS和Android平台的webkit的差异,需要区分来对待。
根据userAgent来区分设备,然后加载不同的viewport配置。
var adaptUILayout = (function(){ //根据校正appVersion或userAgent校正屏幕分辨率宽度值var regulateScreen = (function(){ var cache = {}; //默认尺寸 var defSize = { width : window.screen.width, height : window.screen.height }; var ver = window.navigator.appVersion; var _ = null; var check = function(key){ return key.constructor == String ? ver.indexOf(key) > -1 : ver.test(key); }; var add = function(name, key, size){ if(name && key) cache[name] = { key : key, size : size }; }; var del = function(name){ if(cache[name]) delete cache[name]; }; var cal = function(){ if(_ != null) return _; for(var name in cache){ if(check(cache[name].key)){ _ = cache[name].size; break; } } if(_ == null) _ = defSize; return _; }; return { add : add, del : del, cal : cal }; })(); //实现缩放var adapt = function(uiWidth){ var deviceWidth, devicePixelRatio, targetDensitydpi, //meta, initialContent, head, viewport, ua; ua = navigator.userAgent.toLowerCase(); //whether it is the iPhone or iPad isiOS = ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1; //获取设备信息,并矫正参数值 devicePixelRatio = window.devicePixelRatio; deviceWidth = regulateScreen.cal().width; //获取最终dpi targetDensitydpi = uiWidth / deviceWidth * devicePixelRatio * 160; //use viewport width attribute on the iPhone or iPad device //use viewport target-densitydpi attribute on the Android device initialContent = isiOS ? 'width='+ uiWidth +', user-scalable=no' : 'target-densitydpi=' + targetDensitydpi + ', width='+ uiWidth+', user-scalable=no'; //add a new meta node of viewport in head node head = document.getElementsByTagName('head'); viewport = document.createElement('meta'); viewport.name = 'viewport'; viewport.content = initialContent; head.length > 0 && head[head.length - 1].appendChild(viewport); };return { regulateScreen : regulateScreen, adapt : adapt }; })();/* *640为当期页面指定的统一分辨率,其他分辨率下均为此分辨率的放缩变化 */ adaptUILayout.adapt(640);
上述方法的运行结果是(Android对应nexus5,其他手机target-densitydpi会有不同):
IOS: <meta name="viewport" content="width=640, user-scalable=no">
Android:<meta name="viewport" content="target-densitydpi=853.3333333333333, width=640, user-scalable=no">
上述方案可以解决市面上大多的手机的屏幕适配问题,但是对于有些特殊的获取不到window的width的手机,可以通过自动添加的模式加入适配方案。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发Webapp频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号