做移动端html5页面适配，通常要考虑很多种情况。

对于同一部手机，通常要考虑如下3点：

1、 在手机普通浏览器中打开，比如Safari浏览器，UC浏览器，QQ浏览器，360浏览器，谷歌浏览器。

2、在微信浏览器中打开。

3、在APP中打开webview内嵌页面。

下面就拿iphone6为例（截屏页面视窗宽*高为750*1334），对比不同浏览器的窗口大小，有利于设计师明确该在多大范围发挥创意。

【app页面】

【微信页面】

【谷歌浏览器】

【safari浏览器非全屏模式初始态】

【safari浏览器非全屏模式滑动态】

【uc浏览器非全屏模式初始态】

【uc浏览器非全屏模式滑动态】

【uc浏览器全屏模式滑动态】

【qq浏览器非全屏模式初始态】

【qq浏览器非全屏模式滑动态】

【qq浏览器全屏模式滑动态】

【360浏览器非全屏模式初始态】

【360浏览器非全屏模式滑动态，从下往上滑】

【360浏览器全屏模式滑动态】

Iphone6手机不同浏览器页面尺寸设计的更多相关文章

  1. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  2. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  3. 微信跳转，手机WAP浏览器一键超级跳转微信指定页面

    微信跳转,手机WAP浏览器一键超级跳转微信指定页面 这篇文章主要介绍了如何在手机浏览器wap网页中点击链接跳转到微信界面,需要的朋友可以参考下 先说第一种,最简单的唤起微信协议,weixin://主流 ...

  4. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  5. 手机上的页面转换page slider

    小伙伴们是不是经常在手机上见到“转场"的情况,手机上的页面转换已经不像pc上整体的页面跳转,很多都是利用动画平滑地在页面之间的切换.   那么如何来做页面之间的转换呢?首先要明确的是,所谓的 ...

  6. canvas在手机qq浏览器显示错乱

    做大转盘的时候,使用html5 canvas 生成转盘,但在手机qq浏览器中显示错乱. 原本想在后台生成大转盘图片,后来想一想既然用图片来实现, 还不如直接由canvas 导出 toDataURL 在 ...

  7. js的命名空间 && 单体模式 && 变量深拷贝和浅拷贝 && 页面弹窗设计

    说在前面:这是我近期开发或者看书遇到的一些点,觉得还是蛮重要的. 一.为你的 JavaScript 对象提供命名空间 <!DOCTYPE html> <html> <he ...

  8. iphone手机safari浏览器访问网站滚动条不显示问题解决办法

    近排有公司同事出差在外需使用OA系统,发现iphone手机safari浏览器在该出现滚动条的页面没有显示滚动条,导致无法正常使用. 系统前端页面是采用jeasyui搭建的框架,使用iframe变更主页 ...

  9. robotframework_如何用Chrome模拟手机打开H5页面

    由于公司目前的产品大部分都是APP端的H5页面,APP原生页面很少,测试H5页面如果去搭建appium或者macaca这类自动化平台太费时,太重而不能快速落地:与自动化的目标:提高测试效率相悖.但如果 ...

随机推荐

  1. 学号20155308 2016-2017-2 《Java程序设计》第5周学习总结

    学号20155308 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 8.1 语法与继承架构 使用try...catch 注意多个catch一定把父类放后面 ...

  2. ubuntu环境下eclipse的安装以及hadoop插件的配置

    ubuntu环境下eclipse的安装以及hadoop插件的配置 一.eclipse的安装 在ubuntu桌面模式下,点击任务栏中的ubuntu软件中心,在搜索栏搜索eclipse 注意:安装过程需要 ...

  3. 查看GCC的内置宏定义

    开发过程中我们常常需要使用宏定义.. 为了尽可能多的使用GCC为我们提供的特性,首先我们需要知道gcc提供了那些特性... gcc -dM -E - < /dev/null 没错,就这么一句话就 ...

  4. Inline函数使用注意事项

    Inline函数使用注意事项 1.在一个文件中定义的inline函数不能再另一个文件中使用 2.inline函数应简洁,只有少数几个语句. 3.在inline函数中不能有循环,if,switch语句. ...

  5. spring-boot-全局异常

    Spring Boot默认的异常处理机制 默认情况下,Spring Boot为两种情况提供了不同的响应方式. 一种是浏览器客户端请求一个不存在的页面或服务端处理发生异常时,一般情况下浏览器默认发送的请 ...

  6. PCI学习之总线原理01

    -----------以下资料由网络资料整理而成-------- PCI即Peripheral Component Interconnect,中文的意思是“外围器件互联”. PCI总线支持32位和64 ...

  7. 如何编译和安装libevent【转】

    转自:http://www.open-open.com/lib/view/open1455522194089.html 来自: http://blog.csdn.net/yangzhenping/ar ...

  8. Linux内核触摸屏驱动--多点触摸 【转】

      转自:http://blog.chinaunix.net/uid-24227137-id-3127126.html 简介 为了使用功能强大的多点触控设备,就需要一种方案去上报用户层所需的详细的手指 ...

  9. 怎么看innodb的B+TREE层数?

    怎么看innodb的B+TREE层数?,下面以sysbench_testdata.sbtest2为例查看索引层数: - 查看相关系统 root@localhost [sysbench_testdata ...

  10. 修改类不用重启Tomcat加载整个项目

    可以修改类不用重启Tomcat加载整个项目(手工启动) 配置reloadable=true(自动重载) 使用Debug模式,前提是仅限于局部修改.(修改类不用重启--热加载) Tomcat轻小,而We ...