从Pc转向H5开发遇到的适配问题思考
1.首先说滚动条
移动端开发在不设置任何适配和viewport宽度的情况下,以iphone5为例:屏幕界面的逻辑分辨率是320x568,在谷歌浏览器的界面下屏幕的可视宽度是980px(谷歌设置的,每个浏览器宽度不一样),
所以界面如果是980可以横向铺满全屏:
如果超过980就会出现滚动条.比如界面宽度是1200:
所以屏幕出现滚动条很大可能是 viewport设置不对或者未配置这个属性(滚动条一般取决于viewport 里面的宽度设置,如果没有配置viewport里面的宽度,并且界面宽度超出浏览器默认的可视宽度就会出现滚动条),如果加上这个标签"",移动端浏览器的可视宽度就 = 移动端的逻辑像素;所以设置后HTML的宽度就是320px了,所以里面宽度是320px的DIV可以填充整个屏幕宽度了。
超出就会出现滚动条了:
当然只设置“initial-scale=1”效果和 “width=device-width”一样的
2.再说PC界面在移动端被缩放
还是以iphone5为例,苹果5用谷歌浏览器的话界面默认宽度是980(在不配置viewport的情况下,并且每个浏览器标准宽度不一样),但是苹果5的逻辑像素是320X568(逻辑像素也就是css像素,或者说是PC屏幕下的像素),
所以上图: 一个PC界面在不添加任何适配和viewport比例等配置,直接拿到移动端显示,界面会被等比例缩放,例如上图:一个宽980px的界面如果放在PC端显示宽度就是980px,但是拿到移动端显示的界面铺满了320px(PC的像素或者逻辑像素)的屏幕(因为在谷歌下浏览器默认可视宽度也是980所以可以铺满),缩放比例是980/320 = 3.06倍,所以PC端100px的宽度在移动端界面会缩放成32px(100/3.06),总之,PC界面拿到移动端如果没有设置适配和viewport缩放比例的话界面会被缩小,缩小比例根据浏览器的默认的可视宽度来确定(比如谷歌的是980,所以在苹果5下界面会相对于PC界面被缩小980/320=3.06倍)
同样想不被缩小,想和PC的宽度一致,也要设置viewport标签:
<meta name="viewport" content="width=device-width"> 或者 <meta name="viewport" content="initial-scale=1">
3.关于设备像素比(device pixel ratio)简称dpr
dpr = 物理像素 / 逻辑像素,这个比例不是控制界面在不同移动端下的大小缩放的,dpr不会改变界面内容的大小,改变的是清晰度,相当于相同长宽大小下1px(pc像素)代表多少像素(屏幕物理像素)的比例,相当于屏幕清晰度的比例,在不同的屏幕上,CSS像素所呈现的物理尺寸是一致的,而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕(dpr=2)下,1个CSS像素对应的却是4个物理像素,所以相同大小下的DIV更加清晰。
详细参考:http://www.w3cplus.com/css/towards-retina-web.html
4,怎么算出来的font-size
font-size = px值 / rem值 例如 100 = 750px / 7.5rem
布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size。
假设设计稿是宽750px来做的,书写css方便计算考虑,根节点的font-size假定为100px,得出设备宽为7.5rem。设计稿中标注的任何px数值都可以换算成px/100的rem值。
就是说,每一个设备的宽度都定为7.5个rem,然后宽度非750px的设备里,就需要用JS对font-size做动态计算,换算关系为:根节点的font-size=设备宽度/7.5。
(这段理解为:自定义100的font-size,根据设计稿750px的宽来计算出界面的宽就是7.5rem,所以设计稿里面所有的px都除以100再加上rem单位,然后这个界面拿到其他不同分辨率的屏幕下都要首先动态计算font-size,因为之前font-size可以根据750/7.5算出来,所以这个界面假设在375px宽的屏幕下显示,font-size就是50=375/7.5,这样font-size和屏宽的比例永远是7.5,原本在750界面宽度为0.32rem的div(0.32100=32px),移到375的屏幕下,0.32rem没有变但是font-zise变成了50,所以div宽度变为0.32rem50=16px,相当于这个div根据屏幕缩小一半而缩小一半,这样就算适配不同屏幕了吧
)
7.5这个比例是根据不同的设计稿得到的,比如设计稿是640px,比例就是6.4 :
基于iphone4或者iphone5来的,所以它的设计稿竖直放时的横向分辨率为640px,为了计算方便,取一个100px的font-size为参照,那么body元素的宽度就可以设置为width: 6.4rem,于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。根据这个计算规则,可得出本部分开始的四张截图中html的font-size大小如下:
deviceWidth = 320,font-size = 320 / 6.4 = 50px
deviceWidth = 375,font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414,font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500,font-size = 500 / 6.4 = 78.125px
即:document.documentElement.style.fontSize = document.documentElement.clientWidth*(window.devicePixelRatio||1) / 7.5 + 'px';
注:需要考虑到dpr,即一倍屏两倍屏的问题。
http://mobile.51cto.com/web-484304.htm
备注:
每个浏览器对最小font-size的支持,不尽相同。js动态计算的font-size值太小时,会导致超小屏上UI显示效果比预想中的偏大。
比如,font-size计算是10px,但是chrome只支持到12px,他就按照12px去渲染了,这就会导致UI偏大了。(上面方案中的100px肯定是没有问题的)
具体表现:
从Pc转向H5开发遇到的适配问题思考的更多相关文章
- H5开发:横屏适配
平常我们做过的需求里,主要是以竖屏式为主,而横屏式较少.对于竖屏式场景来说,大家的经验会比较丰富,因此,此次主要式探讨下横屏式场景下的一些需要注意的点,特别是怎样去做横屏适配. 对于 H5 横屏页面来 ...
- 浅谈无线h5开发
最近一直在做h5的项目,对h5开发有了自己的理解.首先h5开发并不是指的html5的开发,而是指无线端的web开发,至于为什么叫h5开发,我觉得一方面是因为html5近几年还是挺受关注,另一方面h5在 ...
- 使用Flexible实现手淘H5页面的终端适配【转】
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- 使用Flexible实现手淘H5页面的终端适配(转)
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- (转)使用Flexible实现手淘H5页面的终端适配
原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...
- PC/APP/H5三端测试的相同与不同
随着手机应用的不断状态,同一款产品的移动端应用市场占相较PC端也越来越大,那么app与PC端针对这些产品的测试有什么相同与不同之处呢?总结如下: 首先谈一谈相同之处: 一,针对同一个系统功能的测试,三 ...
- [转]使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- 带你使用h5开发移动端小游戏
带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为 ...
- 10天学会phpWeChat——第七天:创建一个自适应PC网站+H5移动端的模块
本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系 ...
随机推荐
- Java实现文件重命名
最近在做一个Android上面的一个文件管理器的apk,有文件名重命名和剪切的功能. 一般的思路如下: 重命名:先新建一个文件,复制原先的文件,读写文件,最后删除原先文件 剪切:先复制原先的文件,删除 ...
- BFC概念和作用,触发条件
1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inlin ...
- @functools.wrapes
保证被装饰函数的__name__属性不变
- 进阶篇:5.1)极值法(Worst Case ,WC)
本章目的:了解极值法,运用极值法: 1.极值法定义 极值法(WC,Worse Case):极值法是考虑零件尺寸最不利的情况,通过尺寸链中尺寸的最大值或最小值来计算关键尺寸的值: 计算公式: 2.极值法 ...
- next_permutation(全排列)
废话不多说,直接上代码,谁测试,谁知道 C++: #include<bits/stdc++.h> using namespace std; typedef long long ll; in ...
- 使用app-inspector查看元素,无法连接到手机,提示错误{ Error: Command failed ……forward tcp:9001 tcp:9001错误解决
在学习使用app-inspector查看元素时,碰到一个问题.在cmd窗口执行命令app-inspector --port 5678 -u 85EABNFSU53R --verbose ,连接不到手 ...
- 使用Appium-Desktop捕获APP元素控件实现自动化控制
使用Appium捕获APP的元素控件 实现自动化控制 我是用的是华为P20手机进行测试,为了映射出它的adb端口,需再去官网下载安装一个华为手机助手,然后将手机调成开发者模式,连接时选择传输文件模式. ...
- 如何使用新的glibc来编译自己的程序
http://www.sysnote.org/2015/08/25/use-new-glibc/ 通常情况下我们都是直接使用glibc提供的一些库函数,但是某些特殊的情况,比如要修改glibc的一些代 ...
- Java框架-mybatis01查询单个数据
1.什么是mybatis? mybatis是一个基于Java的持久层框架. 2.持久化:数据从瞬时状态变为持久状态. 3.持久层:完成持久化工作的代码块.---dao 4.Mybatis是帮助程序员将 ...
- MySQL初始化与用户配置
数据库初始化 默认情况下,数据已经初始化好,数据可参见默认配置文件/etc/my.cnf 在其他位置重新初始化MySQL数据库: basedir是mysql的安装根目录,ldata是数据初始化的目录 ...