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

最新推荐文章于 2025-06-29 15:27:07 发布

chenchao2016

最新推荐文章于 2025-06-29 15:27:07 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5+CSS 文章标签：移动 web javascript

本文链接：https://blog.youkuaiyun.com/u010486124/article/details/52348097

HTML5+CSS 专栏收录该内容

6 篇文章

订阅专栏

本文分享了移动端开发中的几个实用技巧，包括避免在简单场景下过度使用JS插件、利用meta标签实现APP唤醒及了解浏览器默认行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

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

使用IScroll的js方法 , myScroll.scrollToElement("#anchor", time)。

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

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

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

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

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

总之，js在iPhone中唤醒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-data和app-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的。为什么？