移动端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是浏览器默认的字体大小

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




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

移动端web前端的那些坑

1.移动端文件名不要用game等,以防被合作服务器劫持插入广告,从而影响项目运行 2.红米手机,ua返回iphone,需要结合platform判断,但是还不准确,导致需要ios和androi...
  • u013022210
  • u013022210
  • 2016年05月04日 10:39
  • 3010

移动端web整理 移动端问题总结,移动web遇到的那些坑

http://www.cnblogs.com/PeunZhang/p/3407453.html#question_20 meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面忽略将页...
  • kongjiea
  • kongjiea
  • 2015年09月07日 11:50
  • 5016

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

转过来,平时看看。虽然还有很多问题至今无解。1、安卓浏览器看背景图片,有些设备会模糊。用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经过研究,是devicePixelRatio作怪...
  • weixin_37794497
  • weixin_37794497
  • 2017年12月24日 12:57
  • 767

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

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

移动端页面开发的“坑”

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

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

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

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

移动开发的一些问题,怕作者删掉,未告知本文作者的情况下转载,见谅。贴上地址:http://www.mamicode.com/info-detail-1187764.html 1、防止手机中网页放...
  • ruizer
  • ruizer
  • 2017年08月04日 17:29
  • 114

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

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

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

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

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

一.基本Meta !-- 设置缩放 -- meta name=viewport content=width=device-width, initial-scale=1, user-scalable=n...
  • qq_18826911
  • qq_18826911
  • 2017年03月06日 08:46
  • 10935
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动端web页面开发中遇到的三个“小坑”
举报原因:
原因补充:

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