1、viewport 简单粗暴的方式:
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no"> 直接设置viewport为320px的1.3倍,将页面放大1.3倍。
为什么是1.3?
目前大部分页面都是以320px为基准的布局,而iphone6的宽度比是375/320 = 1.171875,iphone6+则是 414/320 = 1.29375那么以1.29倍也就约等于1.3了。
2、ip6+ 的CSS media query
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
/*iphone 6*/
} @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
/*iphone 6 plus*/
} PS: 也可以直接使用实际的device-width:如 device-width : 375px
在原有页面的基础上,再针对相应的屏幕大小单独写样式做适配。
3、REM布局
REM是CSS3新增的一种单位,并且移动端的支持度很高,android2.x+,ios5+ 都支持。REM是相对于dom结构的根元素来设置大小,也就是html这个元素。相较于em单位,rem使用上更容易理解及运用。
REM与PX的换算可以查看网址: https://offroadcode.com/prototypes/rem-calculator/
假设,html我们设置font-size:12px; 也就是说12px相对于1rem,那么18px也就是 18/12 = 1.5rem。
那么我们以320px的设计布局为基准,将html设置为font-size:100px,即100px = 1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。
REM如何做响应式布局
1、如果仅仅是适配ip6+设备,那么使用media query就行。
伪代码如下:
/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem /*实际相当于14px*/} /* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
html{font-size: 117.1875px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
html{font-size: 129.375px;}
} 这样,在ip6下,也就将页面内的元素放大了1.17倍,ip6+下也就是放大了1.29倍。
2、如果是完全自适应,那么可以通过JS来控制。
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
}; // Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); 页面初始化的时候计算font-size,然后再绑定resize事件。这种效果就和百分比布局一样了。 原链接:https://zhidao.baidu.com/question/435513467716368724.html 注意写法:
错误的没带空格就不生效:
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){body{font-size:16px;}}

改成之后要带空格才生效:

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){body{font-size:16px;}}

移动端页面怎么适配ios页面的更多相关文章

  1. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  2. 移动端web页面如何适配

    移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...

  3. 使用vw做移动端页面的适配

    Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...

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

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

  5. 判断当前终端是手机还是pc端并进行不同的页面跳转

    判断当前设备(终端)是手机还是pc端并进行不同的页面跳转 DEMO 1 <script type="text/javascript"> function browser ...

  6. 前端页面的适配使用rem换算

    前端页面的适配使用rem换算 https://www.cnblogs.com/liangxuru/p/6970629.html 注:本文转载之处:https://www.cnblogs.com/ann ...

  7. bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法

    bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...

  8. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  9. iOS页面传值-wang

    iOS页面间传值的方式(NSUserDefault/Delegate/NSNotification/Block/单例) 实现了以下iOS页面间传值:1.委托delegate方式:2.通知notific ...

随机推荐

  1. mongoDB的了解

    一.什么是mongoDB? 1.MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能. 2.MongoDB 旨在为WEB ...

  2. Keepalived使用小结

    编译安装 1.安装环境 CentOS release 6.4 Based on Linux 2.6.32,安装1.2.9,没问题 在Red Hat Enterprise Linux Server re ...

  3. Storm集群部署及单词技术

    1. 集群部署的基本流程 集群部署的流程:下载安装包.解压安装包.修改配置文件.分发安装包.启动集群 注意: 所有的集群上都需要配置hosts vi  /etc/hosts 192.168.239.1 ...

  4. SqlServer——常见问题汇总

    1.存储过程手动执行正常,应用程序高并发允许时,数据成倍数增加 通常此类问题是由于存储过程中使用了永久表作为中间表,用以存储临时数据.当高并发时,比如同时执行3次,则同时往中间表中插入3倍的数据,得到 ...

  5. 把jpg文件读取到内存char* 再转换成CImage

    网络上找到大神写的转换方法,不过就记下来,学习学习: 当然转成CImage之后就可以从CImage转换成HBITMAP 了 void DrawPic(CDC *pDC,char *buf,int le ...

  6. android获取mp4视频文件总时长和视频宽高<转>

    android使用 MediaMetadataRetriever 获取视频文件的 总时长 和视频的分辨率. 根据该方式获取视频信息可以看出不仅仅可以获取时长和分辨率,还能获取到其他的一些视频信息,不错 ...

  7. InputStreamReader和BufferedReader的区别

    .InputStream.OutputStream 处理字节流的抽象类 InputStream 是字节输入流的所有类的超类,一般我们使用它的子类,如FileInputStream等. OutputSt ...

  8. 前端xss攻击

    xss是什么 xss跨站脚本攻击(Cross Site Scripting),是一种经常出现在web应用中的计算机安全漏洞,它指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌 ...

  9. 刷题向》关于第一篇状压DP BZOJ1087 (EASY+)

    这是本蒟蒻做的第一篇状压DP,有纪念意义. 这道题题目对状压DP十分友善,算是一道模板题. 分析题目,我们发现可以用0和1代表每一个格子的国王情况, 题目所说国王不能相邻放置,那么首先对于每一行是否合 ...

  10. SpringBoot20 集成SpringSecurity02 -> 利用SpringSecurity进行前后端分离的登录验证

    1 SpirngBoot环境搭建 创建一个SpringBoot项目即可,详情参见三少的相关博文 参考博文 -> 点击前往 SpirngBoot项目脚手架 -> 点击前往 2 引入Spirn ...