手机浏览器分辨率不等同于手机屏幕分辨率带来的开发特点

作者:vkvi 来源:千一网络(原创) 日期:2016-10-10

现在手机分辨率越来越高,1080*1920 都是普通分辨率了,但这还真挺高的,似乎我们做手机版网页可以像做电脑版网页一样做了。

其实不行,因为手机虽然分辨率高,但由于屏幕小,其浏览器分辨率却很小,iPhone 6 为 Galaxy S5 为 360*640、375*667、iPhone 6 Plus 为 414*736,也就是说手机浏览器分辨率不等同于手机屏幕分辨率,这点不同于电脑。

那么如何开发好手机版网页,就有几个很好的建议:

一、限定缩放

二、采用百分比布局

电脑版中我们可这样写:.leftCol { width:300px; } .rightCol { width:700px; }

但手机版中建议这样写:.leftCol { width:30%; } .rightCol { width:70%; }

三、针对不同分辨率写不同 CSS

注意:

由于并不是用的 width <= 判断,而是用 max-width : 判断。如果有更多条件,也可加更多 and。

扩展:

min-width、max-width 分别表示手机浏览器的最小宽度、最大宽度。

min-device-width、max-device-width 分别表示手机屏幕的最小宽度、最大宽度。

四、手机浏览器采用的标准相对较为统一,且支持 HTML5、CSS3,所以各浏览器之间兼容性要好得多、开发起来也要轻松得多。

你前面那位网友看了:开发手机版要注意限定文章页图片最大尺寸

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
赞助商们
vkvi
vkvi

作者简介: vkvi,致力于 .NET Web 开发、移动开发的技术推广,在 .NET、SQL Server、Windows Server 等方面有深入研究和丰富经验,10 年间共计撰写文章 4000 余篇。 主持金融、国土、农业、电商等多个行业项目执行, 推行“技术提升生产力、人心决定成功率”的管理理论。 联系他