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的更多相关文章

  1. 10天学会phpWeChat——第七天：创建一个自适应PC网站+H5移动端的模块

    本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系 ...

  2. H5移动端知识点总结

    H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解display:box的布局 理解flex布局 Flex布局兼容知识点总结 回到顶部 移动开 ...

  3. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  4. 旅行app(游记、攻略、私人定制) | 顺便游旅行H5移动端实例

    <顺便游旅行>是一款H5移动端旅行app,提供目的地(国内.国外.周边)搜索.旅游攻略查询.游记分享.私人定制4大模块,类似携程.同程.去哪儿.马蜂窝移动端,只不过顺便游app界面更为简洁 ...

  5. H5移动端项目案例、web手机微商城实战开发

    自微信生态圈一步步强大后,关于移动端购物的趋势,逐渐成为大众关心的内容,目前市场上关于移动商城的制定就有大量版本,比如.微商城.移动商城.移动webAPP.微信商城各等各种定义层出不穷,这就对于移动端 ...

  6. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  7. 亲历H5移动端游戏微信支付接入及那些坑（二）——获取Openid和授权

    第一篇中将一些坑说明,那么这篇开始正式进入接入步骤.具体的参数说明,我不会列出,毕竟微信官方文档都有,我想大家都看的懂,而且这接口也有可能微信会变动,所以不列出来,也是不想引起大家的误解,接入步骤只起 ...

  8. H5安卓端浏览器如何去除select的边框？

    H5安卓端浏览器如何去除select的边框? android下没有问题,在apple下无三角号. -webkit-appearance:none; border-radius:0

  9. h5移动端常见虚拟键盘顶起底部导航栏解决办法

    在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...

  10. H5移动端IOS/Android兼容性总结，持续更新中…

    H5移动端IOS/Android兼容性总结,持续更新中… 1. IOS不识别日期 new Date("2018-07-01 08:00:00")在Android下正常显示可以直接进 ...

随机推荐

  1. uboot mmc烧写命令

    mmc write addr blk# cnt 这个命令的作用是将内存上的数据写入mmc中 参数: addr: 从内存读取的位置 blk: 写入到mmc中block位置,这个位置是mmc的0地址的偏移 ...

  2. STM32时钟数

    在STM32中,有五个时钟源,为HSI.HSE.LSI.LSE.PLL. 其实是四个时钟源,如下图所示(灰蓝色),PLL是由锁相环电路倍频得到PLL时钟. ①.HSI是高速内部时钟,RC振荡器,频率为 ...

  3. swift 定位

    iOS 8 及以上需要在info.plist文件中添加下面两个属性 NSLocationWhenInUseUsageDescription 使用应用期间 NSLocationAlwaysUsageDe ...

  4. android之fragment

    觉得写得好:http://blog.csdn.net/shulianghan/article/details/38064191

  5. Dapper学习笔记（2）-链接引用

    在研究Dapper源码时发现Dapper NET45类库中的SqlMapper.cs文件前面有个蓝色的箭头图标,发现在Dapper NET45文件夹下根本不存在SqlMapper.cs文件,其文件属性 ...

  6. MYSQL单双向同步

    Master:192.168.1.101 Slave  :192.168.1.102 单向同步(一) 进入Master启动MYSQL [root@localhost ~]# service mysql ...

  7. 查询SQLSERVER执行过的SQL记录

    SELECT TOP 1000 --创建时间 QS.creation_time, --查询语句 SUBSTRING(ST.text,(QS.statement_start_offset/2)+1, ( ...

  8. odi 12.2.1中访问excel文件

    由于在odi 12.2.1中,必须使用jdk1.8,而jdk1.8中jdbc-odbc bridge已经不再支持,因此,可以使用Progress DataDirect SequeLink来充当jdbc ...

  9. PKU 1006

    数学问题吧,有兴趣的可以研究一下“中国剩余定理” // 1006.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include < ...

  10. npm(cnpm)介绍

    1.npm(node package manager) nodejs的包管理器,用于node插件管理(安装.卸载.更新.管理依赖等); 2.使用npm安装安装插件: 1).命令提示符执行 npm in ...