码迷,mamicode.com
首页 > 移动开发 > 详细

h5移动端-1

时间:2015-08-01 14:14:27      阅读:126      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!