移动端适配和多终端判断

最新推荐文章于 2023-02-13 16:26:15 发布

Charlotte1018

最新推荐文章于 2023-02-13 16:26:15 发布

阅读量1k

点赞数 2

分类专栏：浏览器 JavaScript 文章标签：移动端 vue vant

本文链接：https://blog.csdn.net/charlotte1018/article/details/80403540

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

浏览器

2 篇文章 0 订阅

订阅专栏

1.总结
这次针对520节日，我们策划了一个签署协议的活动，非常感谢我们的团队为这次活动做的贡献，设计师连夜赶的设计稿，很漂亮，很有浪漫的feel。我作为这次的前端工程师，在没有做过移动端H5的情况下，也遇到了不少挑战。
2.移动端系统判断

2.1 js判断Android和IOS系统
userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。通过这个属性可以判断浏览器的类型。

let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

2.2 js判断浏览器是否是移动端（Mobile）、ipad、iphone、微信、QQ等

let browser={
versions:function(){
let u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信（2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

2.3 js判断手机端和PC端

//如果返回的是false说明当前操作系统是手机端，如果返回的是true则说明当前的操作系统是电脑端
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
3.移动端适配问题
移动端浏览器种类繁多，还有两大系统，Android和IOS系统的兼容性，都是比较复杂的问题，没有这方面的知识储备和积累，导致这次的任务三次返工，也增大了很多无谓的工作量，最幸运的是刷到朋友圈，朋友刚刚分享的移动端的框架Vant，给了我很大的帮助。Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。
3.1 百分比和rem
最初的版本是希望用百分比和rem的方式完成这次移动端的适配,但是效果并不理想。
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。因此rem是最好的选择。刚开始html元素的字体大小为16px，因此rem值很不好判断，数值也不好计算，不太清楚rem这个单位的大小，样式非常不好调整。

3.2 flexible.js和rem
后来采取flexible.js和rem的方案来进行布局，flexible.js正是利用rem单位相对根元素<html>的font-size来做计算，而我们需要做的就是根据不同的屏幕算出html的font-size，而页面内的大小单位都根据rem来写，从而实现了自适应。在此推荐一个博客《flexible.js如何实现rem自适应》

http://caibaojian.com/flexible-js-2.html

由于时间紧张，没有完全参透，就放弃了这种办法，但是这个可能是比较优秀的办法，后面会回来好好学习这部分知识。
3.3 Vant框架
这个是一个比较优秀的移动端开发框架，在UI和适配方面给了我很大的帮助。

// Vant官方文档地址
https://www.youzanyun.com/zanui/vant#/zh-CN/intro
// Vant Demo地址
https://github.com/youzan/vant-demo

4. 浏览器转发卡片内容的控制
这部分是个值得研究和探讨的点，接下来会好好研究一下怎么操作。

let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

Charlotte1018

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端适配和多终端判断

##### 1.总结这次针对520节日，我们策划了一个签署协议的活动，非常感谢我们的团队为这次活动做的贡献，设计师连夜赶的设计稿，很漂亮，很有浪漫的feel。我作为这次的前端工程师，在没有做过移动端H5的情况下，也遇到了不少挑战。##### 2.移动端系统判断###### 2.1 js判断Android和IOS系统userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代...
复制链接

扫一扫