移动端web页面开发中遇到的三个“小坑”

原创 2016年08月31日 20:07:12

目前自己接触的移动端项目很有限,所以发现的坑不是那么多,暂时只记录下最近在解决的小坑

一、简单的移动端页面最好不用JS插件

在开发中使用自己熟悉的框架或者插件对自己的开发效率帮助是很大的,但是在实际的开发中不能求效率而不考

虑后续的扩展性,毕竟用户的需求是不断变化的。以移动端用的较多的iScroll为例,如果你开发中,只是用了它的滑

屏功能,其他地方并没有展示出它的优势,建议还是使用Css来实现比较好。

首先,IScroll会让原本简单的功能实现变得复杂,例如锚点,使用了iscroll以后,href=”#anchor”是无效的,需要

使用IScrolljs方法 , myScroll.scrollToElement("#anchor", time)

其次,IScroll会阻止部分DOM事件,目前遇到比较明显的情况就是,video标签定义的视频在移动端播放受到影

响,安卓手机上的问题差异很大,例如无法点击播放、点击事件无响应等。

再次,在简单的项目中移动端页面使用的范围可能很有限,也许只需要一个模板页面即可,使用插件反而会影响移动端响应速度,影响后期体验优化,得不偿失。

 

二、mate标签功能其实挺强大

最近有使用js唤醒本地安装APP的功能需求,现在采用的比较多的方式就是使用插入iframe的方式,配置APP的唤醒连接,在AndroidiOS9以下的iPhone上好用的,但是在iPhone上体验是很不好的。在iOS9系统上,这个方式就不行了。如果使用location.href直接打开连接,一直会有安全提示,并且不一定能打开APP

总之,jsiPhone中唤醒APP并不如安卓中顺利。这里可以使用meta标签来完美唤醒‘沉睡中的APP


直接上方法:

<span style="font-size:18px;"><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"></span>

其中affiliate-dataapp-argument选填,app-id必填

例如,我需要唤醒“亿企赢财税的APP,下面的配置就能起作用。

<span style="font-size:18px;"><metaname="apple-itunes-app" content="app-id=1127148565, affiliate-data=myAffiliateData,app-argument=winwin://"></span>

Note:

Safari has a new Smart App Banner feature in iOS 6 and later that provides a standardized method of promoting apps on the App Store from a website.

如果你手机上没有安装这个APP,他会带领你去appstore下载。

当我纠结很久在iOS9中唤醒APP的时候,这个标签真心是个大救星啊,赞!



三、浏览器默认的某些性质要知道

对移动端web开发人员来讲,最长用的单位就是CSS3引入的rem,这种善于“变换”的单位真的“弹”力十足,

rem“弹”得起来前提是你要有根据屏幕宽度改变而改变的根元素font-size,进而对整个页面的rem做调整,从而达到适应不同尺寸屏幕的目的。

<span style="font-size:18px;">function rootRize() {
        var initWidth = 750;
        var thisWidth = document.documentElement.clientWidth;
        thisWidth > 750 ? thisWidth = 750 : '';
        document.getElementsByTagName('html')[0].style.fontSize = 20 * (thisWidth / initWidth) + 'px';
    }
    window.onload = rootRize;
window.onresize = rootRize
</span>

例如这样改变页面根元素大小,但是在谷歌中你会发现,当不断减小页面宽度的时候,根元素的font-size虽然在

变,但是到某个点的时候,页面的rem却不变了!!!然而在ff中是ok的。为什么?



Google chrome iswrong



FF is Fine




其实出现这种状况的原因很简单,那就是谷歌浏览器“强制”最小的font-size是12px,所以,当根标签小于12px的时候,在谷歌浏览器中会出现上述的问题,解决的方法就是将font-size尽量设大,让其在320px宽的小屏手机中也能正常改变rem。

另外两个特殊值也要记住:

16px

62.5%

很多的开发者一开始就是用html{font-size:62.5%},第一次见的时候我是有点懵的,为什么要这样设置字体大小?

因为16 X 62.5% = 10px,这样使用rem来设置某些css的宽度高度什么的就方便计算了,其中的16px是浏览器默认的字体大小

坑不坑因人而异,欢迎提出更好的解决方案!




版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Apache Cordova-Android框架原理研究笔记

一、移动端跨平台的技术 跨平台概念   跨平台是软件开发中一个重要的概念,即不依赖于操作系统,也不信赖硬件环境。一个操作系统下开发的应用,放到另一个操作系统下依然可以运行。相对而言如果某种计算机语...

初学Phaser.js之碰撞检测

写游戏的人都知道碰撞检测,Phaser直接封装好了函数供我们调用,请看 Phaser.Physics.Arcade.collide(object1, object2, collideCallback...

常见的移动端H5页面开发遇到的坑和解决办法

转过来,平时看看。虽然还有很多问题至今无解。比如:华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。!! 1、安卓浏览器看背景图片,有些设备会模糊。   用同等比例的图片...

移动端页面开发的“坑”

现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作,就目前的状况来看,手机页面的兼容性要比PC端更为复杂(当然主要是只在android端,大家懂的),而且有些样式在PC端页面上可能没什么,...

浅谈前端移动端页面开发(布局篇)

前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档 去了。本以为自己对移动端的那一丢丢理解,结果很多东西都特么有...

总结移动端页面开发时需要注意的一些问题

1、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport 有些手机网站我们看到如下声明: DOCTYPE html PUBLI...

app移动端H5页面开发调试之Chrome远程调试

移动端采用原生开发还是H5开发一直接争论不休。但不论怎么说,采用H5开发app不仅仅快速高效,而且布局简单、漂亮,目前许多的框架已经可以做到让人看不出是原生还是H5开发了。 采用H5开发有一个好处就是...

移动端HTML5页面开发相关总结

一.基本Meta !-- 设置缩放 -- meta name=viewport content=width=device-width, initial-scale=1, user-scalable=n...

移动端页面开发资源总结

工作了有一段时间,基本上都在搞前端的开发,由于公司的需要,加一个移动端,工作的过程中遇到过很多问题,bug的解决方案,记录下来,以便后用!!!内容并不是很全,以后每遇到一个问题都会总结在这里,分享给大...

前端移动端页面开发

一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动端web页面开发中遇到的三个“小坑”
举报原因:
原因补充:

(最多只允许输入30个字)