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. MFC 对话框控件自动布局

    MFC 设计界面程序总是不够智能,没有这样,没有那样. 今天为了加强mfc功能,设计了一个自动布局的类,使用非常简单. 原理: 每个控件都有一个矩形区域,矩形区域就是控件在对话框中的显示位置和大小, ...

  2. tomcat启动不了

    今天弄了一个项目想在在自己的电脑上面运行起来,当部署在tomcat上的时候发现tomcat就是启动不来,思忖了一段时间后发现原来是tomcat的相关jar没有导入进去.所以,properties-&g ...

  3. javafx之登陆界面的跳转

    界面布局用到的是fxml而非纯java代码,工具是javafx sence builder 账号:account 密码:password 登陆成功: 可以点击退出登陆返回到登陆页面 工程目录: pac ...

  4. what is SVD and how to calculate it

    http://web.mit.edu/be.400/www/SVD/Singular_Value_Decomposition.htm SVD是研究地震波运动极性化的一个方法.

  5. 第六章 第一个Linux驱动程序：统计单词个数

    现在进入了实战阶段,使用统计单词个数的实例让我们了解开发和测试Linux驱动程序的完整过程.第一个Linux驱动程序是统计单词个数. 这个Linux驱动程序没有访问硬件,而是利用设备文件作为介质与应用 ...

  6. Unity Ugui射线坐标转换总结

    世界空间中的点坐标转换到屏幕坐标: screenPos = RectTransformUtility.WorldToScreenPoint(cam, worldPos.transform.positi ...

  7. Metronic学习之路

    简介 1.Metronic 是一个基于 Bootstrap 3.* 设计的自适应.多用途的管理后台模板. 2.HTML页面开头都有着下面一段代码来检测 ie 浏览器的版本,并根据不同版本应用特定的类到 ...

  8. ios 大图 真机不显示的问题

    png的图片只是命名为png,格式不是png的. 打开terminal终端,cd图片目录,输入命令sips -s format png *.* --out pngs,再把图片覆盖即可

  9. difference between forward and sendredirect

    Difference between SendRedirect and forward is one of classical interview questions asked during jav ...

  10. php基础的一点注意事项

    1.要弄懂"~"运算符的计算方法,首先必须明白二进制数在内存中的存放形式,二进制数在内存中是以补码的形式存放的 另外正数和负数的补码不一样,正数的补码,反码都是其本身,即: 正数9 ...