移动端 H5 开发技巧整理

前言 这篇文章主要是把平时在 H5 开发中遇到的一问题的解决方案整理记录下来,毕竟好记性不如烂笔头。 关于系统字体大小 在测试身上什么事都会发生,比如把手机系统的字体大小设置为超大,此时在不同手机这个设置影响的范围是不一样的,有些手机只会影响到系统本身的字体大小,而不会影响到 H5 中的字体大小。但不幸的是,在一些手机中这个就不是这么一回事了,它会毫不留情地把你 APP 里的字体大小一...

2018
02-08

手机 APP 广告页适配方案

手机 APP 我不信你不用,作为前端开发人员,手机 APP 的 H5 页面适配问题也是逃掉的,因为那是命中注定的。下面要分享的这个只是前端 H5 页面适配中的冰山一角,但也是非常地常用的,它就是传说中的广告页。也就就是我们常常打开 APP 时第一屏所看到的图片页。 不要小看它,觉得就这么一小张图片有什么大不了的,但当你仔细分析的时候你就会发现其中的一些问题,比如:在不同屏幕的手机上要有一致的展示效...

2017
12-26

移动端 input 输入框弹出键盘时页面被吊打的解决方案

前言 IOS 的兼容永远是前端开发的一个伤心地,虽然是这样,但你也没有办法,毕竟果粉还不是一般的少,当 IOS 键盘遇到 fixed 的时候,你除了感到无助外,更多的是绝望。不过现在曙光就在眼前,只要你把这篇文章仔细阅读完。 说走就走的旅程 首先我们得知道一个事实,那就是在绝大部安卓机中,只要你按常理出牌(常用布局),一般情况下点击输入框弹出手机键盘都不会有什么问题。这里我们不妨假设一个常...

2017
10-24

移动端适配方案 flexible.js

前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别)。所有我们得找到一种相对来说让人比较满意的解决方案,尽可能地让这种“意外”减到最少。没错今天的主角就是它“flexible.js” 。 flexible.js 之旅 flexible.js 的作用就是让你在不同的终端设备之间如鱼得水,如入无人之境。说得那么浮,一点感...

2017
10-09

iscroll 让移动 WEB 页面滚动如丝般顺滑

前言 iscroll 是一个有关于移动端滑动的解决方案,但它又不仅仅只是滑动,还有一些其它的非常好用的功能,比如:图片放大,视觉差效果。 关于 iscroll 也没什么好说的,直接点开 demo 链接,你就可以感受到如丝般顺滑原来就这么简单。 iscroll 示例 http://yunkus.com/demo/iscroll/demos/2d-scroll/index.html http://yunkus.com/demo/iscroll/demos/barebone/index.html http://yunkus.com/demo/iscr...

2017
09-24

移动端禁止页面滚动最佳实践

在移动端禁止页面滚动非常的有用,比如在手机端弹出一个弹窗,并带有遮罩,此时你肯定不想让页面可以滚动,毕竟这个遮罩看起来就是这种感觉。下面我们分享一段很实用的代码。代码非常的精简,但恰到好处。 看这里 function preventDefaultHandler(e){ e.preventDefault(); }; document.addEventListener('touchstart', preventDefaultHandler,false);//阻止默认滑动事件(绑定 touchstart) docum...

2017
09-20

Cordova APP 使用友盟 U-WEB 事件跟踪统计分析功能

前言 这是一篇没有什么技术含量的文章,只是在 Cordova 构建的 APP 中调用友盟 WEB 版的事件跟踪统计功能。如果是把友盟统计(https://www.umeng.com/)用到网页中,那么这篇文章就没有什么值得看的了。因为如果是放到网站中,那么就你直接把相关代码放到页面上就完事了。 友盟事件跟踪之旅 首先官方是有提供 Cordova 的 SKD 资源包。但在这里不用  SKD 资源包,而是尝试使用友盟的 U-WEB(网站统计)...

2017
09-18

移动端非常实用的插件和库

前言 本文主要分享下移动端比较常用的一些插件及库。包括 JS 库和 CSS 库。有了这些插件及库,你也可以轻松做一个移动项目,即使是我们生活中常用的 APP 中的一些效果。 JavaScript 库 有了下面这两个 JavaScript 库,就可以让你的 APP 页面有了质的飞越,效果棒棒不要不要的。 Swiper 官网地址:http://www.swiper.com.cn/ 这个插件可以实现一些导航滑动效果,页面切换效果,甚至是H5 的视觉差效果...

2017
09-17

移动端布局解决方案

前言 在移动 WEB 开发中页面整体框架的布局极其重要,如果你曾经感受过这种痛苦,你就会觉得这篇文章就是为你而写。还是那句话:好的开始,你就成功了一半。我们开始吧? 这也是我自己踩过的一个大坑,在项目中没有做好页面整体框架的规划,也就是整个页面上中下如何布局。对于头部和底部我用了fixed 看起来没有什么毛病,但在实践的使用中就会发现一些让你抓狂的 BUG。在 IOS(如:iphone 5s) 下弹出键...

2017
09-06

关于移动端开发的一些忠告

有好的开始,你就成功的一半,在移动端开发中也不例外。对于一个项目来说框架的选择以及整个项目的结构布局极其重要。下面就分享下自己在平时开发过程中遇到的一些问题,会文会一直更新。 问题一:要不要选择前端 UI 框架 对于这个问题得根据项目的实践情况来进行选择。比如:你的项目采用了敏捷开发,那么框架对于你来说就很有必要了,但是这里有一个问题需要注意,你得提前跟交互同事、UI 同事沟通好。...

2017
09-04

信微信聊天窗口输入框实现方案

微信相信你不陌生了,即使你天天用并且你也从事前端工作,但如果你没有遇到过这样的需求,你是不会留意到微信聊天窗口底部的那个输入框里的用户体验优化细节。如果我说对了,那么你可以先打开微信,然后输入很多很多内容,看看那个输入框会怎么变化。 如果你觉得这很麻烦,好,我用文字直播。当你输入的内容超过一行时,输入框的高度会自己适应你的内容以容下两行内容,但当你输入的文字达到一定的行数时,...

2017
06-13

移动端触摸(touch)事件

移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空。该来的总会来,我们要做的就是接受未知的挑战。正如你所看到的,这是一篇关于移动端触摸事件的文章,也就是我们平时在手机中用得最多的动作:touch。现在让我们开始 touch touch touch 吧! Touch 事件 首先 touch 包含三类事件,它们分别是:touchstart、touchmove、touchend 。望文生...

2017
04-23

移动端侧滑导航、侧滑菜单效果

手机端的侧滑导航、侧滑菜单效果极其地常见,这篇文章就是分享侧滑导航的制作过程。首先这是一个基于 jQuery 库的插件,其实不用 jQuery 库也是可以的,并且代码改起来也不能,这里就不作过多的讲解。 首先做这个效果的时候我们得分析下,要实现这个功能,我们需要什么技术。 所需技术 1.滑动,你可以JavaScript 实现 也可以用 CSS3 实现。这里我用CSS3 实现。 2.JavaScript 事件绑定解绑、事件禁用。 从...

2017
03-24

移动端列表索引效果

移动端列表索引效果非常实用,比如:手机通讯录。你可以根据字母来查找对应的内容。下面这个例子我是参考了 MUI 里的列表索引效果,写出来的代码,代码的结构基本一样,但功能会少一些,去掉了搜索框搜索,只有单纯的字母索引,不过这也基本够用了。这个效果是基于 jQuery 库的,所以在用的时候就记得引入 jQuery 库。 为了版面美观我专门用横屏截了个图,正如你所看到的,样板还是挺好看的,那功能怎么样...

2017
03-22

移动端用滚动条属性实现左右滚动效果

前言 移动端左右滚动,不是我们常说的图片切换,只是实现了通过手指实现内容的左右滚动。现在很多app 都会有这样的效果。在线 Demo :http://yunkus.com/demo/mobile-use-scroll-bar-property-realize-horizontal-scroll/。注意:浏览器得切换到手机模式查看效果哦! 入门代码 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

2017
03-06

移动端 WEB APP 框架大全

现在如今要开发一个 APP 可以说是一件非常简单的事了,因为网上很在有很多这样的 APP 前端框架。下面我给大家整理下。 SUI Mobile 简介 SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。 轻量的UI库。SUI Mobile 非常轻量,核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K...

2017
02-14

meta viewport 你真的了解吗?

前言 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 上面是一行我几乎每天都用到的代码,它给我们带来的好处是非常明显的,一眼就可以看到的,除了这一点,我对它就一无所知了,我天真地以为只要认识它能给我实现什么样的效果就足够了,可事实却告诉我:“你这小子也太天真了,你千万别被网上一大堆的搜索结果骗了,...

2016
07-09

设备像素,设备独立像素,CSS像素

前言 这两个属性说难不难,说容易又不易容。但如果你弄明白了这个,你就明白了一些东西,一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起,其实虽然标题里是三个名词,但我们接下来只聊两个就可以了,为什么?看完你就知道了。 基本定义 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。 CSS...

2016
07-02