H5页面适配iOS、Android和微信
前言
本文章针对H5开发的单页全屏无滚动页面。
解决方案
整体采用vw、vh作为基本单位,采用flex布局,针对字体使用rem单位。
多终端适配
针对app包下载等业务场景,需要识别对应的终端,采用不同的地址下载。针对微信特定情况,需要引导用户去往浏览器打开。
识别终端类型可以采用如下方式:
// 微信
const isWeixin = () => {let ua = window.navigator.userAgent.toLowerCase();return ua.match(/MicroMessenger/i) == 'micromessenger';
};// Android
const isAndroid = () => {let u = window.navigator.userAgent;return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
};// iOS
const isIOS = () => {let u = window.navigator.userAgent;return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
};
横竖屏切换
js作为浏览器运行语言,无法控制设备的横竖屏切换。我们可以做一些兼容的处理。
首先,要监测出用户切换了横竖屏,检测方法:
- window.matchMedia
const checkMediaOritation = () => {const mql = window.matchMedia('(orientation: portrait)');mql.addListener(() => {if (mql.matches) {// 竖屏} else {// 横屏}});
};
- window.innerWidth > window.innnerHeight
window.addEventListener("resize", () => {let h = window.innerHeight, w = window.innerWidth;if(h > w) {// 竖屏} else {// 横屏}
});
监测到用户切换横竖屏后,常见处理方式有三种:
- 给予用户提示信息,让用户保持其中一种模式操作
- 页面整体旋转,保持页面布局不变
- 页面自适应,出现滚动条
其中第1种和第3种比较好理解,第2种处理方式如下:
- 采用js控制transform方式整体rotate(-90deg)
// 以竖屏布局为主,适配横屏let h = window.innerHeight, w = window.innerWidth;if(h > w) {document.getElementById("rootElement").transform = "rotate(0deg)";} else {let height = document.getElementById("rootElement").clientHeight;let width = document.getElementById("rootElement").clientWidth;document.getElementById("rootElement").transform = "rotate(-90deg)";document.getElementById("rootElement").transformOrigin = height / 2 + "px " + height / 2 + "px"; // 如果rotate 90deg,则这里取 width / 2}
- 在第一种方式上优化,用css的方式控制
let h = window.innerHeight, w = window.innerWidth;if(h > w) {rootElement.className = "someClass";} else {rootElement.className += " rotate";}
然后把所有的切换后的样式写在rotate上,rotate下所有元素的单位vh 和 vw互换。对应的rem也要同步调整
.rotate {width: 100vh;height: 100vw;transform: rotate(-90deg);transform-origin: 50vh 50vh;
}
如有问题,还望不吝赐教。
H5页面适配iOS、Android和微信相关推荐
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
- h5页面适配iPhone X的方法
项目接近尾声,测试时突然想起还有iphoneX需要适配,虽然页面都是自适应,但是由于iPhone X的特殊性,还是需要特殊对待.因为这个h5项目嵌入在原生项目中,适配就会有有种方式:1.在原生中用原生 ...
- 移动端h5文字长按复制_移动端开发 H5 页面在 iOS手机上无法实现 长按复制文本 求解决...
移动端开发 H5 页面在 iOS手机上无法实现 长按复制文本 百度谷歌搜索的答案是 iOS手机系统自带 需要设置禁用 我们需求是要实现此功能 可是我在手机测试 并没有实现长按复制文本 之前这样设置可以 ...
- 【原】让H5页面适配移动设备全家 - 设计师篇 - PPT
上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前 ...
- H5页面与ios交互返回上一级
H5页面与ios交互时,返回上一级不兼容,安卓兼容 实现方法 (需要加return false) <a href="#" onclick="javascript: ...
- app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法 参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
- js禁止苹果页面底部滚动_Vue.js 实现禁止 h5 页面在 ios 浏览器内置的下拉 bounce 效果...
介绍 vue-disbounce是一款基于Vue.js的自定义组件,可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果. 组件 :style="{'background-col ...
- 关于H5页面在ios上打开,页面空白的问题
关于H5页面在ios上打开,页面空白的问题 这个问题发生在一个永不升级的用户身上 机型:iPhone X 系统:ios 11.2.6 问题描述:打开链接可以显示页面的标题,但是页面空白,没有走任何接口 ...
- 移动端 H5页面适配
一.基础概念 在了解如何做H5页面适配前,大家都应该把移动端涉及的一些概念搞明白,比如:dpr 是什么意思? 移动端H5解惑-概念术语(一) 二.为什么要做页面适配 2.1 PC端为什么要解决浏览器兼 ...
最新文章
- IJCAI 2020 已线上开奖!周志华、张成奇还将分别担任2021程序主席和2024大会主席...
- Linux/U-Boot Git Repo
- mysql 配置多个数据库连接_总结MySQL修改最大连接数的两个方式
- Storage 使用
- Linux设备树语法详解【转】
- 数据结构java版 大学_数据结构(Java版)
- 关于LD_PRELOAD在Android API HOOK中的应用
- MongoDB实战系列之三:MongoDB的主从部署
- bootstrap布局设计在线工具
- if else语句 整除求余运算
- centos7系统文件名颜色含义
- 文献管理工具之Zotero:如何在Zotero中设置webdav连接到坚果云?
- word文档中标题跳到表格的下方-解决方法
- Java开发常用词汇表
- 小程序关注公众号组件
- Android 加载pdf文件
- 索尼android sd卡上,SD卡各个文件夹功能详解 入手必看经验!!!!
- 在ThinkPad W500 A98上升级Windows 7以及安装硬件驱动和相关程序
- Excel表格数据该怎么读取和写入之——xlsread函数和xlswrite函数
- Java技术交流群[微信](Talking Coding)