移动端页面开发从一开始就比pc端的适配要头疼一些。从媒体查询到viewport缩放,再到现在,rem方案才是喜欢简单粗暴的切图仔的福音。移动端开发有着多屏幕尺寸,多像素比(devicePixelRatio)的限制,不能像pc那样做到设计稿和页面同比例同尺寸了。
对比后发现,pc上图片尺寸和设计稿一致。此时移动端还未设置“width=device-width”,可视区宽度默认为980px。这里我再脑补下~~。可能在PC浏览网页的时代,大部分设计师们将网页的主体部分设计在1000px,980px,960px这些范围内,可以让一些小尺寸低分辨率的显示器看全主体内容。
进入移动设备的时代,浏览设备的尺寸更小了,为了能让移动端用户正常浏览大部分网页,便将可视区宽度设置为980px。网页被缩放显示了,这样移动端用户便看全了主体内容。这个过程有点像PC的用户为了看清楚网站整个视觉设计和背景,将浏览器缩放显示,但PC上缩放显示时,像素比降低了。而这里移动端缩放显示了网页,像素比却没有降低,貌似是可视区离网页的距离变大了,可视区相对于网页做了次translateZ运动,由于近大远小,网页就像被缩放显示了(如下图)。
此时设置viewport: <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" /> （设置可视区宽度为设备宽度,无缩放）
上述设置过后,pc端没有变化,移动端截图:
此时看到设备分辨率宽度和可视区宽度保持了一致,同时400px宽度的图片和可视区宽度的显示比例也对上了,320宽度的iphone5没有显示全,414宽度的iphone6s plus则刚好超出部分宽度。(此时用移动设备浏览网页时如下图:)
当然我们也能通过设置"initial-scale"值,来还原没有添加viewport时的默认缩放显示。以iphone5来说,320px转为980px,320/980=0.326530612244898,我们将initial-scale设置为该结果(此时截图如下)
以上图9和图3是一样的，就验证了上述的想法。那这样感觉好办了,我们只要让设计人员把移动端网页主体内容,设计在宽度320px以内,然后和pc上一样，写上宽度320px,居中显示就可以。但是很遗憾,在早期智能机上,devicePixelRatio为1的时代,这个方案还是可行的。万恶的苹果在iphone4发布时,推出了一个新概念:视网膜屏(Retina)。iphone4的devicePixelRatio值为2,从此给切图仔们带来了一段梦魇~~,早期的写死宽度已经不再适用,按照早期的原比例设计稿写的页面,显示起来都会模糊。
不过任何事情都是阻止不了切图仔的....
以上观点为个人观点和个人脑补的记录方式,欢迎交流指正 : )