专栏首页Web行业观察移动前端兼容操作总结

移动前端兼容操作总结

移动端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),作者:金恒昱

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Win10如何手动添加开机启动项

    在日常生活中,偶尔要求其中的软件在开机时便能自动启动,比如MySQL一般被设置为自启动项。今天将为大家介绍window10中如何添加开机启动项。

    Jean
  • Material Design的概述与环境

    Material Design 是我们将经典的设计原则和科技、创新相结合而创造的设计语言。这份文档会随着我们对 Material Design 的探索而不断更新...

    Jean
  • 简单了解下无障碍设计模式

    一款设计良好的产品可供所有能力的用户使用,包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。改进产品的无障碍功能可以增强所有用户的可用性,这是非常值得做的...

    Jean
  • JavaScript实现input框获取系统默认年月日时分秒

    这是对旧的已上线项目的维护之中优化的一个部分,要求是在input框里面默认当前系统的时间。实现如下图所示的效果。

    祈澈菇凉
  • AkShare-股票数据-财务指标

    股票基本面数据接口,之前 AkShare 一直缺少关于股票基本面的数据,现在更新两个数据接口:财务摘要和财务指标。

    AkShare
  • VBA按行读取csv文件与分割合并

    林万程
  • 第52天:offset家族、scroll家族和client家族的区别

    半指温柔乐
  • 每天一道leetcode-最大子序和

    给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。 进阶: 如果你已经实现复杂度为 O(n) 的解法,尝试...

    乔戈里
  • 利用Prometheus与Grafana对Mysql服务器的性能监控详解

    Prometheus是源于 Google Borgmon的一个开源监控系统,用 Golang开发。被很多人称为下一代监控系统。Grafana是一个开源的图表可视...

    拓荒者
  • electron+vue+webpack error: exports is not defined

    小贝壳

扫码关注云+社区

领取腾讯云代金券