继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

移动端web前端页面技巧

renpingjun
关注TA
已关注
手记 2
粉丝 11
获赞 284
Ⅰ.移动端框架

1. Zepto.js

Zepto.js是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。轻量级,大小为2-5k的库,通过不错的API处理绝大多数的基本工作。

2. jQuery Mobile

jQuery Mobile是 jQuery发布的针对手机和平板设备、经过触控优化的Web框架。它基于jQuery,在不同移动设备平台上可提供统一的用户界面。该框架基于渐近增强技术,并利用HTML5和CSS3特性。

3. FrozenUI

FrozenUI专注于移动web的UI框架,基于腾讯手机QQ规范。

4. Bootstrap

Bootstrap是Twitter推出的一个用于前端开发的开源工具包,是目前最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

Ⅱ.head部分代码
<head lang="zh-cn">
    <meta charset="UTF-8">
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!-- 添加到主屏后的标题(iOS 6 新增) -->
    <meta name="apple-mobile-web-app-title" content="">
    <!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
    <meta name="format-detection" content="telephone=no, email=no"/>
    <!--下面三个是清除缓存 微信浏览器缓存严重又无刷新;这个方法调试的时候很方便-->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>仁平君临天下</title>
</head>
Ⅲ. 移动端字体设置

1. font-family

三大手机系统的字体现状:

iOS 系统

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

Android 系统

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

无微软雅黑字体

Winphone 系统

默认中文字体是Dengxian(方正等线体)

默认英文和数字字体是Segoe

无微软雅黑字体

各个手机系统有自己的默认字体,且都不支持微软雅黑,如无特殊需求,手机端无需定义中文字体,使用系统默认英文字体和数字字体可使用 Helvetica ,三种系统都支持,即:

/* 移动端定义字体的代码 */
body{font-family:Helvetica;}

2. 字体单位

因为需要适配各种分辨率的移动设备,建议使用rem。

打开App,阅读手记
56人推荐
发表评论
随时随地看视频慕课网APP

热门评论

ionic算不?好不好?

查看全部评论