首页 > 移动平台 > 详细

h5移动端-1

时间:2015-08-01 14:13:16      阅读:235      评论:0      收藏:0      [点我收藏+]

iphone3 : 

设备分辨率 : 320*480

屏幕分辨率 : 320*480

 

iphone4 : 

设备分辨率 : 320*480

屏幕分辨率 : 640*960

 

iphone5 : 

设备分辨率 : 320*568

屏幕分辨率 : 640*1136

 

iphone6 : 

设备分辨率 : 375*667

屏幕分辨率 : 750*1334

 

设备分辨率 : 表示设备的大小

屏幕分辨率:手机屏幕具体有多少个像素组成

屏幕分辨率更大,我们需要解决:1.当我们用低分辨率的图片放到iphone高分辨率的设备下,会模糊;高分辨率图片放到低分辨率设备上会出现锯齿.设计的时候根据屏幕分辨率大小设计,根据不同手机出不同的设计稿从理论上是最好.怎么从程序上实现呢?

window.devicePixelRatio : 屏幕分辨率/设备分辨率  .  可以根据设备不同来调取不同的图片,

主流屏幕分辨率 : 640*960 (设计稿尺寸)  640*1136

viewport:视口,指我们在浏览器中可视的区域.指的是显示HTML页面的大小,和屏幕分辨率以及设备分辨率没有太大关系.默认视口

<meta name="viewport" content="width=device-width , user-scalable=no,initial-scal=1">

高度适配:

通过JS动态设置

background-size : cover

h5移动端-1

原文:http://www.cnblogs.com/aomore/p/4693987.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!