此次方案的优化点
- 页面元素会随宽度的变化而自适应的放大和缩小,和原来不同的是,全页面的高度、字体都会随宽度变化,保持同比例的变化,保证页面不会变形。页面样式只需要写一套CSS布局即可。
- 对于无法获取到屏幕宽度的手机(极少数个例),我们也可以通过自定义的模式添加支持
统一布局规则
- 内部布局统一使用px作为单位,可以根据视觉稿来还原;
- 字体也使用px,可以保持和其他的元素的相同的放缩比例,不要采用em,或者rem,因为目前没有根据device-width来设定根节点的默认字体,使用rem会随浏览器本身差异而变化,不可控;
- 图片资源,根据设计的提供的资源情况而定。一般资源可根据宽度加载不同的图片资源的方案。icon类资源,按建光的方案,使用icon fonts;
- 列表和表格较多,可以考虑是否需要加入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的手机,可以通过自动添加的模式加入适配方案。
相关推荐
4G终端和网络适配性问题优化案例河北.docx
将地磁图的适配性评价抽象成多属性决策问题,首先给出常见的地磁图属性以及用于方案排序的线性加权模型,在此基础上研究排序结果不变时属性权重的变化范围以及属性权重发生变动情形下的灵敏度问题,定量推导出使得...
基于CR-DSmT的景象匹配辅助导航适配性分析方法研究,凌志刚,曲圣杰,景象匹配适配性分析对提高景象匹配导航系统的匹配性能具有重要意义。然而影响适配区选择的因素之间往往相互制约,相互依存,导致
高度适配性 — 无论是桌面还是移动设备,全面优化的响应式设计确保网站在各种屏幕尺寸上完美展现。 SEO友好结构 — 强化搜索引擎可见度,吸引更多目标用户访问你的网站。 立即采用这份专业级源码,开启你的娱乐游戏...
线膛火炮弹炮适配性试验技术.pdf
模糊决策理论的地磁图适配性分析.docx
软件工程中的跨平台开发与适配性.pptx
大数据背景下的城市承载适配性评价研究.caj
基于并行卷积神经网络的地磁方向适配性分析.pdf
基于贡献因子BP神经网络的地磁适配性研究.pdf
xosc验证工具,也可用来验证OSC与VTD版本适配性
设计构建人工酿酒酵母细胞合成青蒿二烯的关键是使外源功能模块与底盘细胞适配, 本文通过对外源功能模块中的载体、 蛋白表达和启动子进行优化, 以提高功能模块与底盘细胞的适配性. 使用着丝粒载体和附加型载体构建了2...
为了研究广州国家创新型城市的各项政策实施效果,采用系统动力学方法,构建了广州国家创新型城市的R&D投入适配性模型,对R&D经费投入和R&D人员投入进行了仿真分析;研究结果表明,广州R&D经费投入占GDP比重应在百分之三...
网络游戏-基于卷积神经网络的地磁图方向适配性计算方法.zip
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴...蓝桥杯dac模块适配性编程源码+项目说明.zip
空气悬架行业深度报告:成本下行拓宽装机需求,电动智能带来绝佳适配性.pdf
它不仅关注技术实施细节,更重视企业文化和员工技能的适配性,确保转型过程中人与技术的协同发展。此方案以数据驱动为核心,强调在保障数据安全的前提下,通过数据分析洞察业务趋势,优化产品策略,提高运营效率,...
适配性强:EasyFaaS可以运行在多种系统环境,包括Docker、Kubernetes及裸机等。资源占用少:模块少,服务系统模块占用更小。无状态:每个EasyFaaS Pod本身无状态且内部自治。高性能:调度链路更短,更小的系统开销和...
基于煤层气勘查开发示范工程,分析了黔西松河井田地温特征及其对煤层气开发的影响,探讨了龙潭煤系上煤组压裂工艺优选及下煤组压裂工艺优化方案。研究表明:受泥岩、煤层热导率低及煤系隔水性好、富水性弱的共同影响,...