移动前端兼容操作总结

移动端Web页面,即常说的H5页面、手机页面、webview页面等。

手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,这里总结的是针对移动端设备的页面,设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。

适配的目标

引用一文章的描述:

在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放(看起来差不多)”。

概念理解

在做适配之前,需要先理解一些概念。对于不理解的地方,可以搜索更多文章看看,本文总结的移动端兼容性问题解决方案囊括了4个思考方向, 注意不是唯一的具体的解决方案而是从四个角度来思考问题, 分别是html, css, 脚本以及http协议(服务端)的视角来考虑兼容问题, 仅供参考~

HTTP: 匹配UserAgent字段

User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。

最主流的方法就是在服务端/客户端查询这个字段:

//检测是否是移动端        function checkMobile() {            if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {                alert("请在移动端查看(或者开发者模式)");            }        }

JS: 判断window和screen

屏幕可用工作区高度/宽:window.screen.availHeight/window.screen.availWidth

屏幕分辨率的高/宽:+window.screen.height/window.screen.width

网页可见区域宽/高:+document.body.clientWidth/document.body.clientHeight

我喜欢一种暴力的方式:

    ///嘿嘿嘿    let device = window.innerWidth < window.innerHeight ? "phone" : "laptop";

CSS: @媒体查询

通过查询屏幕宽度判断手机,只局限于css样式; 特点是,媒体查询动态更新,非常方便,而且不仅适应屏幕大小,还动态兼容窗口尺寸的改变:

@CHARSET "UTF-8";@media (max-width: 991px) {    /*do something*/}@media (min-width: 1601px) {    /*do something*/}

HTML: 添加缩放标签

也是非常实用的,通常手机屏幕的ppi/dpi非常高,所以正常的字体会显得很小,于是最好在html头中添加以下viewport标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width 设置layout viewport 的宽度,为一个正整数,或字符串”width-device” initial-scale 设置页面的初始缩放值,为一个数字,可以带小数 minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数 maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数 height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用 user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许

原文发布于微信公众号 - WebHub(myWebHub)

原文发表时间:2018-06-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

关于首屏时间采集自动化的解决方案

关于首屏 首屏时间是指从转向该页面到屏幕中该页面所有内容都可见时的时间。已经有太多的关于首屏时间的计算,在本文中并不重复阐述这些已经被提出或者实现的方案,而旨...

5207
来自专栏游戏开发那些事

【Unity3d游戏开发】UGUI插件入门之游戏菜单

  ugui是unity4.6开始加入的一个新的ui系统,非常强大,下面我们将通过一系列博客的方式一起来学习一下ugui的使用。本篇博客会介绍如何使用ugui制...

2532
来自专栏进击的君君的前端之路

HTML5

5385
来自专栏腾讯NEXT学位

2018 我所了解的 Vue 知识大全

3906
来自专栏向治洪

ReactJs和React Native的那些事

介绍  1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你...

19910
来自专栏liuchengxu

如何使用 Vim 的 help

实际上,无论是 Vim 的基础知识还是进阶知识,大都可以从 help 中找到指引。但是我想很多人并没有意识到这一点,或者并没有重视这一点。RTFM (read ...

722
来自专栏IMWeb前端团队

滚动上报实现

本文作者:IMWeb 何璇 原文出处:IMWeb社区 未经同意,禁止转载 最近产品说要在一个课程卡片列表页面中收集用户滚动行为的数据,大致是要获取用户...

2237
来自专栏河湾欢儿的专栏

html5标签

什么是html5? 仅仅是狭义的概念。h5草案前身叫做web application 由WHATWG组织编写,在2007年提交到了w3c,w3c起名叫做HTM...

2811
来自专栏君赏技术博客

百思不得姐数据挖掘第二篇

首先进入的是启动的界面,我们已经在上一篇做好了。第一次启动之后会出现一个宣传的视频,是下面的界面。

1551
来自专栏葡萄城控件技术团队

对《30个提高Web程序执行效率的好经验》的理解

阅读了IT文章《30个提高Web程序执行效率的好经验》,这30条准则对我们web开发是非常有用的,不过大家可能对其中的一些准则是知其然而不知其所以然。 下面是我...

1905

扫码关注云+社区

领取腾讯云代金券