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. OC基础--Xcode 模板修改和文档安装

    修改项目模板 项目模板就是创建工程的时候选择的某一个条目, Xcode会根据选择的条目生成固定格式的项目 如何修改项目模板 找到Xcode, 右键"显示包内容" 打开"/ ...

  2. .net 读取Excel文件报错

    错误内容 Microsoft Office Excel 不能访问文件“D:\WWWRoot\Website\Test\Excels\Test1.xls”. 可能的原因有: 1 文件名称或路径不存在. ...

  3. iOS 8 以后 MKMapView 代理不执行问题

    因为ios8上,如果你使用了mapView,必须设置mapView的大小,必须把它添加显示在视图上. 可以将frame设为(0,0,0.1,0.1)  

  4. Emacs 相关资料翻译

    Table of Contents 1. 37 Document Viewing 2. EmacsrelatedTranslation 2.1. Spacemacs 配置层(Configuration ...

  5. SpellTime

    如果你的应用程序允许用户输入文本,或者它结合了任何基于文本的处理,那么我们有一款你一直寻找的产品.Spell Time 允许你把个拼写检查器整合到你的产品中.该产品携带了完整的源码.Spell Tim ...

  6. MongooseJS 4.6.4 发布，MongoDB 连接包

    MongooseJS 4.6.4  发布了,MongooseJS 是基于 node.js,使用 JavaScript 编程,连接 MongoDB 数据库的软件包,使MongoDB 的文档数据模型变得优 ...

  7. Type.GetType()反射另外项目中的类时返回null的解决方法

    项目1:ProjectA namespace ProjectA { public class paa { .... } } Type.GetType("paa")返回null Ty ...

  8. oracle问题

    (1) 连通性: 注册中心负责服务地址的注册与查找,相当于目录服务,服务提供者和消费者只在启动时与注册中心交互,注册中心不转发请求,压力较小 监控中心负责统计各服务调用次数,调用时间等,统计先在内存汇 ...

  9. 实用工具【SqlPrompt】 【Subline】 【XMind】 【PhotoShop】 【TakeColor】 【Q+】本次只讨论SqlPrompt

    SqlPrompt[Sqlserver智能提示插件] 1.SqlPrompt可实现sql智能提示,并且会自动关键字大写,如select * from 表名[表名包含的字符],如果实在不知道表名可以按c ...

  10. Session阻塞 读写锁引发的小问题

      引子     我们来看两个ajax方法,先后的问题,会有什么样的结果? Javascript: $(function () { //第一个 $.ajax({ type: "POST&qu ...