10bet移动开发系列

来源:http://www.chinese-glasses.com 作者:Web前端 人气:94 发布时间:2020-03-14
摘要:时间: 2019-12-01阅读: 33标签: h5 1像素边框的问题 只要写手机端的h5页面,viewpoint是绕不过的坎,不处理好这个东西,h5页面就无法正常显示。那它到底是怎么回事呢? iPhone的dpr=2,1px由

时间: 2019-12-01阅读: 33标签: h5

1像素边框的问题

只要写手机端的h5页面,viewpoint是绕不过的坎,不处理好这个东西,h5页面就无法正常显示。那它到底是怎么回事呢?

iPhone的dpr>=2,1px由4dp构成,相当于宽高都放大1倍,它们显示出2dp的效果,PC端由于尺寸较大,所以差距不明显,但是在移动端的小屏幕上,差距就非常突出;

网上曾看到一个据说很有名的外国人,写过一篇"三个viewpoint"的概念,但是看了,觉得似懂非懂,后来做了不少h5页面,然后重新思考viewpoint到底是一种怎样的控制移动端页面的机制?于是我也觉得用"3个viewpoint"解释比较好说,不过跟网上那个外国大佬的"三个viewport"可能会有不少区别

所以这就是为什么在PC端设置1px,在dpr>=2的移动端会显示出"2px"的效果;

第一个viewpoint,这里临时命名为viewpoint1,就是手机硬件屏幕的水平像素数,比如iPhone6分辨率是750像素,那么这个viewpoint就是750第二个viewpoint,这里临时命名为viewpoint2,是设计稿尺寸宽度,通常是以一个用户占有率比较高的手机分辨率为基准,很多就是用iPhone6的750第三个viewpoint,这里临时命名为viewpoint3,就是手机浏览器画布的宽度,它通常有一个远大于硬件分辨率的尺寸,比如980px,和主流PC端网页的内容主体宽度相当。前端能够直接施加影响的就只有viewpoint3这个了,实际上客观存在的viewpoint可以说也只有这一个而已,可以在html中用标签meta设置,也可以JS动态设置。

解决问题的思路是:进行设备检测,当dpr>=2并且为移动设备时,去除PC端设置的border,添加适配移动端元素的border的类,具体就是将border缩放为原来的0.5

最终用手机浏览h5页面看到的效果,则是这三个viewpoint共同作用的。 在没有代码干预的情况下,一般手机会有一个从viewpoint3到viewpoint1的缩放。手机为什么要设计这个机制呢?因为手机硬件屏幕小,但是又想让手机能正常浏览PC的页面。

总结:

为了更好的体验,人们开始为手机定制web页面,比如既然iphone6是750px,那我就做750px的页面。可是即便如此,手机实际看到的页面效果却仍然是被缩放了,因为750px的页面还是要放入到980px的viewpoint3中来显示,而缩放是viewpoint3到viewpoint1的过程,和设计稿宽度,同时也是页面实际宽度的viewpoint2是无关的。

·由于手机设备的dpr缘故导致1px的显示效果在PC端和手机端显示不一致,解决方案是通过在元素内部添加伪类的方式制造出经过缩放0.5倍的1px边框;

如果我不想页面缩放呢?那就可以把viewpoint3的默认值980px改成viewpoint2设计稿的宽度750px,然后viewpoint3到viewpoint1的缩放就成了750px到750px的缩放,也就是没有缩放。有人可能说,你这750px是给iPhone6专门设计的,其他分辨率的手机呢?其他手机基本也会正常显示,和iPhone6的区别仅仅是有缩放和没缩放,但实际效果差不多,因为其他主流手机分辨率就算和iPhone6不同也不会差很远,所产生的缩放的效果也很微小。

·由于以前手机端往往在初次进入页面时需要双击缩放,所以iPhone设置了一个300ms毫秒的方法响应用户操作,由此也带来了不小的麻烦;

这就是所谓三个viewpoint共同决定页面效果的机制了,实际挺主流的一种做法用了一堆js,它又是怎么做的呢?以后有空慢慢说吧。

pc端网站与移动端(手机)网站区别

来自:

PC端:屏幕尺寸大,显示内容多,结构复杂,缩小浏览器窗口,页面内容结构并不会发生改变,也并不是响应式

移动端(手机网站):屏幕尺寸小,显示的内容有限,结构清晰,简洁,设备类型(ipad,iphone5,6,安卓等)繁多,页面内容结构自适应变化,随着浏览器窗口缩小而缩小,放大而放大,等比例缩放

相同点:利用html+css(包括css3)+javascript,pc端性能优化同样适用于移动端策略

不同点:

·移动端的网络速度手机用户大多是通过2G,3G,4G网络来上网,网络速度远低于大部分PC常用的有线网络的,所以移动端网页如果过大,加载时间就会越长,会增加网页访问的跳出率,对于移动端来说,所有的加载速度必须在1秒之内,所以移动端的性能优化必须要考虑的问题,包括图片加载,文件大小等,具体性能优化,可参考往期,不可不知的前端性能优化文章

·PC端上,页面的交互都是鼠标点击,滚轮等操作,而在手机上,都是手指触屏,滑屏操作,页面元素上的按钮,链接等也要大小适中,适合手指点击,在事件处理上也有很大的区别

·PC端兼容性繁多(三个祖中ie678得供着),而移动端无需考虑,更新快,对h5新增的属性,兼容性都很好,顶多加上webkit内核前缀,但是这并不意味着在各个手机浏览器显示相同,什么UC,QQ浏览器仍然是需要特殊兼容性处理的

·pc端,页面布局,设计稿多大,基本上按照psd文档,按照1:1切图,固定宽度,高度,图片已切出来的实际尺寸大小进行填充即可,但是在移动端上,则不行,手机端的分辨率比较高,至于这个分辨率(它指的是显示屏横纵能够容纳的像素点,比如1366x768)表示的是横向能容纳1366个像素点,而纵向能容纳768个像素点,分辨率越高,像素点越多,图片就越清晰

·在pc端,1px像素和浏览器端的像素可以一一对应,按照设计师给出的psd文档按照1:1的方式来做就行了,ps软件中,量出多大的尺寸,对应的css里面就设置多少像素,而在移动端,设备屏幕尺寸比较小,分辨率比较大,比如提高分辨率原先320到640的或者750,960的,提高到两倍,三倍,但是提高之后,css的像素还是依然没有改变,在pc端是一个像素,而到移动端,可能就是两像素,三像素,所以一般针对移动端的设计稿,常见的做法事,从设计稿量中量出来的尺寸,切出来图,在实际给元素设置尺寸时,都应对应的减半(2:1,或者3:1)的方式进行设置尺寸(比如设计稿是960,750,640的的图,那么减半就是320,375,320的),页面中字体,图片对应减半设置即可

·新的API,获取元素的方法,比如document.querySelector(),document.querySelectorAll(),虽然在性能上不如旧的选择器,但是用着方便,一些移动端框架用该选择器比较多,比如jQuery Mobile,sui Mobile,mui等

·pc端的事件不适合在移动端用,比如click(会有300毫秒延迟),移动端上用ontouchstart(手指按下),ontouchmove(手指移动),ontouchend,但是注意的是在Google模拟器下使用on的方式添加touch事件会无效,具体怎么解决这种问题,可以通过addEventListener()的绑定方式,注意用此方法监听事件时,就不要带on,具体见下代码所示

·针对移动端一像素偏差问题,与像素比有关系,也就是所谓的物理像素(分辨率)与独立像素(屏幕的宽度),pc端一像素就是一像素,但是在移动端1像素,有时就不是一像素,也许是两像素,三像素的

o通过添加伪类的方式,同时改变transform:scale(0.5),缩小为一半

o设置div宽度为1像素,同时设置IE怪异盒模型,box-sizing:border-box

o一像素的背景图片替代

·手机网站不适合用作响应式,比如:bootstrap等,因为它很重,不轻量,在pc端网络带宽下加载还是可以的,但是在移动端,就很耗性能来,耗流量,耗电..太过于臃肿,而影响网页的加载

·布局方面,移动端,少用浮动,会破坏文档流,不易拓展,多用Flex布局,移动端上Ie怪异盒模型也是很常用,对于改变元素位置,通常用translate,而不用定位,改变left,top值

·PC端上,用固定像素值px作为元素设置尺寸单位,而在移动端,通常用rem(root 根节点根据html的字体大小计算其他元素尺寸),或者100%,

为什么要做适配

·  为了适应各个移动终端设备屏幕尺寸,完美的呈现应有的布局效果

本文由10bet发布于Web前端,转载请注明出处:10bet移动开发系列

关键词:

最火资讯