移动端页面怎么适配ios页面
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页面的更多相关文章
- 移动端页面开发适配 rem布局原理
主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...
- 移动端web页面如何适配
移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...
- 使用vw做移动端页面的适配
Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...
- 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...
- 判断当前终端是手机还是pc端并进行不同的页面跳转
判断当前设备(终端)是手机还是pc端并进行不同的页面跳转 DEMO 1 <script type="text/javascript"> function browser ...
- 前端页面的适配使用rem换算
前端页面的适配使用rem换算 https://www.cnblogs.com/liangxuru/p/6970629.html 注:本文转载之处:https://www.cnblogs.com/ann ...
- bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法
bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面
创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...
- iOS页面传值-wang
iOS页面间传值的方式(NSUserDefault/Delegate/NSNotification/Block/单例) 实现了以下iOS页面间传值:1.委托delegate方式:2.通知notific ...
随机推荐
- MySQL简述
Mysql是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System:关系数据库管理系统)应用软件之一. ...
- VC6编写的Dll调试方法
Dll工程运行时指定调用exe程序. 关键!!往往被忽略:exe中也一定要指向此调用dll,如果指向不对,什么效果也没有!
- Valid timeZone Values(转)
https://www.vmware.com/support/developer/vc-sdk/visdk400pubs/ReferenceGuide/timezone.html Valid time ...
- Djano + Nginx + docker配置与管理
在配置这个服务之前,应该对docker的基本安装与使用应该很熟悉了.下面开始直接不如正题 1.让我们创建一个名为myproject的空目录,并在src名称内添加另一个文件夹.src应该包含django ...
- 从官网下载jdk1.6 1.7
Oracle Java Archive | Oracle Technology Network | Oraclehttp://www.oracle.com/technetwork/java/javas ...
- Aws s3 api
PUT操作的这个实现将一个对象添加到一个bucket中. 您必须具有对bucket的WRITE权限才能向其中添加对象. Amazon S3从不添加部分对象; 如果您收到成功响应,则Amazon S3将 ...
- java基础之Socket编程概述以及简单案例
概述: 用来实现网络互连的 不同的计算机上 运行的程序间 可以进行数据交互 也就是用来在不同的电脑间, 进行数据传输. 三大要素: IP地址: 设备(电脑,手机,ipad)在网络中的唯一标识. 组成 ...
- 求正整数n的所有因子
因子的概念:假如整数n除以m,结果是无余数的整数,那么我们称m就是n的因子. 需要注意的是,唯有被除数,除数,商皆为整数,余数为零时,此关系才成立.反过来说,我们称n为m的倍数. 求一个正整数n的所有 ...
- leetcode:Median of Two Sorted Arrays分析和实现
这个问题的大意是提供两个有序的整数数组A与B,A与B并集的中间数.[1,3]与[2]的中间数为2,因为2能将A与B交集均分.而[1,3]与[2,4]的中间数为2.5,取2与3的平均值.故偶数数目的中间 ...
- 【转】LVS/Nginx如何处理session问题
原文地址:http://network.51cto.com/art/201005/200279.htm 通过设置persistence的值,使session会话保持. [51CTO.com独家特稿]业 ...