移动手机网站开发规范摘录
移动WEB开发已经是web技术的主流,其实相对于PC端,我们并不需要掌握额外的技术,然而PC上的很多东西并不能全部适用在移动手机WEB,移动WEB端我们必须知道的特别点,以下是我摘录的Alloyteam团队的开发经验。
字体设置
使用无衬线字体
代码如下 | 复制代码 |
body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; } |
Heiti SC Light 黑体-简 细体 (iOS 7后废弃)
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑
原生Android下中文字体与英文字体都选择默认的无衬线字体。
4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体。
基础交互
设置全局的CSS样式,避免图中的长按弹出菜单与选中文本的行为。
代码如下 | 复制代码 |
a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ } html, body { -webkit-user-select: none; /* 禁止选中文本(如无文本选中需求,此为必选项) */ user-select: none; } |
代码如下 | 复制代码 |
移动性能
要考虑Android低端机与2G网络场景下性能!
发布前必要检查项:
所有图片必须有进行过压缩
考虑适度的有损压缩,如转化为80%质量的jpg图片
考虑把大图切成多张小图,常见在banner图过大的场景
加载性能优化, 达到打开足够快。
数据离线化,考虑将数据缓存在 localStorage
初始请求资源数 < 4
图片使用CSS Sprites 或 DataURI
外链 CSS 中避免 @import 引入
考虑内嵌小型的静态资源内容
初始请求资源gzip后总体积 < 50kb
静态资源(HTML/CSS/JS/Image)是否优化压缩?
避免打包大型类库
确保接入层已开启Gzip压缩(考虑提升Gzip级别,使用CPU开销换取加载时间)
尽量使用CSS3代替图片
初始首屏之外的静态资源(JS/CSS)延迟加载
初始首屏之外的图片资源按需加载(判断可视区域)
单页面应用(SPA)考虑延迟加载非首屏业务模块
开启Keep-Alive链路复用
运行性能优化, 达到操作足够流畅
避免 iOS 300+ms 点击延时问题
缓存 DOM 选择与计算
避免触发页面重绘的操作
Debounce连续触发的事件(scroll / resize / touchmove等),避免高频繁触发执行
尽可能使用事件代理,避免批量绑定事件
使用CSS3动画代替JS动画
避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度
HTML结构层级保持足够简单
尽能少的使用CSS高级选择器与通配选择器
Keep it simple
1、echarts使图标能自适应浏览器窗口变化
window.onresize = function () {
myChart.resize(); //使第一个图表适应
myChart_pieMain.resize(); // 使第二个图表适应
}
2、map地图中经纬度与平面坐标转换
var arr = [117,36.4];
alert(myChart.chart.map.getPosByGeo("china",arr)); //map经纬度转成平面坐标
Meta标签是HTML语言head区的一个辅助性标签,它位于HTML文档头部的head标记和title标记之间,它提供用户不可见的信息。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务。
我现将前端页面开发经常用到的meta标签内容整理成文,加入了移动端web开发meta信息,供需要时查阅。
1、申明文档使用的字符编码
<meta charset='utf-8'>
或
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。当然,你也可以使用gb2312(简体中文),big5(繁体中文)等等其他字符集。
而目前我们一般推荐使用第一种写法,也是HTML5使用的写法。
2、声明使用的浏览器及版本
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
当指定的content值为IE=edge,chrome=1时,优先使用 IE 最新版本和 Chrome。假定客户端安装了Google Chrome Frame,则在IE中使用chrome的渲染引擎来渲染页面,否则,将会使用客户端IE最高的标准模式对页面进行渲染。
还有以下几种设置方式:
<meta http-equiv="X-UA-Compatible" content="IE=6" /><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- 使用IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--指示IE以目前可用的最高模式显示内容-->
3、SEO优化相关
页面描述,每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
<meta name="description" content="不超过150个字符" />
页面关键词,每个网页应具有描述该网页内容的一组唯一的关键字。
使用人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语。
<meta name="keywords" content="html5, css3, 关键字"/>
定义网页作者,非必要
<meta name="author" content="月光光" />
4、页面重定向和刷新:content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页。
<meta http-equiv="Refresh" contect="5;url=http://www.helloweba.com" />
上述代码表示停留5秒钟后自动刷新跳转到URL网址http://www.helloweba.com。
5、Expires网页过期时间
<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />
设定网页的到期时间,一旦过期则必须到服务器上重新调用,需要注意的是必须使用GMT时间格式,或直接设为0(不缓存)。
6、Pragma禁止本地缓存
<meta http-equiv="Pragma" contect="no-cache" />
设定网页不保存在缓存中,每次访问都刷新页面。这样设定,访问者将无法脱机浏览。
7、viewport移动设备屏幕可视区域
由于移动设备屏幕宽度不同于传统 web,因此我们需要改变 viewport 值。
大部分4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px。
width – viewport 的宽度 (范围从 200 到 10,000,默认为 980 像素)
height – viewport 的高度 (范围从 223 到 10,000 )
initial-scale – 初始的缩放比例 (范围从 > 0 到 10)
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放 (no,yes)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
强制让文档与设备的宽度保持 1:1 ;
文档最大的宽度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);
user-scalable 定义用户是否可以手动缩放( no 为不缩放),使页面固定设备上面的大小;
注意:实际测试中发现,有些安卓系统自带的浏览器并不支持这一条规则,能够对页面进行放大,一旦放大响应的 box 也随之放大,导致页面出现错乱问题,解决方法:定义页面的最小宽度。
body {
min-width: 320px;
}
注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。
对于移动设备上的meta还有以下一些设置。
8、WebApp全屏模式:伪装app,离线应用。
<meta name="apple-mobile-web-app-capable" content="yes" />
9、隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
10、添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题" />
11、忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />
12、忽略识别邮箱
<meta content="email=no" name="format-detection" />
更多Meta标签相关信息我会持续更新,感谢关注。
部分客户装了QQ浏览器,微信实际调用的是QQ浏览器,有时候甚至光清理微信缓存都无效,QQ浏览器的缓存也要清。
按照网上的文章在页面头部加上了如下的内容:
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
解决方案是在调试阶段或者频繁更新的页面加入以下头信息:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
最简单的办法就是
地址带随机数参数,同时页面的头标记声明禁止缓存。另外还需要检查你程序的页缓存,是不是做了页缓存。
QQ临时会话在网页中加一行代码就可以了,那么在手机中如何来添加呢,今天我们就一起来看一个例子,具体的细节如下所示.function qqcao(){
var type = undefined;
var param = "";
var sid = 2;
var rawuin = 'qq号码';
var qsig = "undefined";
var QQApi = {
openURL: function(url){
var i = document.createElement('iframe');
i.style.display = 'none';
i.onload = function() { i.parentNode.removeChild(i); };
i.src = url;
document.body.appendChild(i);
var returnValue = QQApi.__RETURN_VALUE;
QQApi.__RETURN_VALUE = undefined;
return returnValue;
},
isAppInstalled: function(scheme) {
var parameters = {'scheme':scheme};
var r = QQApi.openURL('jsbridge://app/isInstalled_?p=' + encodeURIComponent(JSON.stringify(parameters)));
return r ? r.result : null;
},
isQQWebView: function(){
return QQApi.isAppInstalled('mqq') == true;
},
__RETURN_VALUE: undefined
};
var usa=navigator.userAgent;
var p;
var mobile_q_jump = {
android:"https://play.google.com/store/apps/details?id=com.tencent.mobileqq",
ios:"itms-apps://itunes.apple.com/cn/app/qq-2011/id444934666?mt=8",
winphone:"http://www.windowsphone.com/zh-cn/store/app/qq/b45f0a5f-13d8-422b-9be5-c750af531762",
pc:"http://mobile.qq.com/index.html"
};
var isMQ = 0;
if(typeof type == "undefined") type = 1;
if(usa.indexOf("Android")>-1){
p = "android";
}
else if(usa.indexOf("iPhone")>-1 || usa.indexOf("iPad")>-1 || usa.indexOf("iPod")>-1){
p = "ios";
}
else if(usa.indexOf("Windows Phone") > -1 || usa.indexOf("WPDesktop") > -1){
p = "winphone";
}
else {
p = "pc";
}
if(p == "ios"){
//防止循环
if(history.pushState)
history.pushState({},"t","#");
isMQ = QQApi.isQQWebView();
if (!isMQ){
var sc = document.createElement("script");
sc.src = "http://__.qq.com/api/qqapi.js";
sc.onload = function(){
if(window['iOSQQApi']){
isMQ =iOSQQApi.device.isMobileQQ();
}
};
document.body.appendChild(sc);
}
}
else if(p == "pc" && qsig != "undefined"){
window.open(qsig,"_self");
}
if(type == 1){//手Q
var isSuccess = true;
var f = document.createElement("iframe");
f.style.display = "none";
document.body.appendChild(f);
f.onload = function(){
isSuccess = false;
};
if(p == "ios" && sid == 1){
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
if(p == "ios" && sid == 2){//ios并且为群名片
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
else if(p != "pc"){
var url = window.location.href.split("&");
f.src = "mqqopensdkapi://bizAgent/qm/qr?url=" + encodeURIComponent(url[0]);
}
if(p == "android" && sid == 1){
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
if(p == "android" && sid == 2){//ios并且为群名片
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
var now = Date.now();
setTimeout( function(){
if((p == "ios" && !isMQ && Date.now() - now < 2000) || (p == "android" && !isSuccess) || ((p == "winphone" && Date.now() - now < 2000))){
var jumpUrl = mobile_q_jump[p];
if(jumpUrl) window.open(jumpUrl,"_self");
}
} , 1500);
}
}
//pc
tencent://Message/?Uin=QQ号码&websiteName=www.cn-mcn.com&Menu=yes
//带图片 pc
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号码&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:QQ号码:41" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
相关文章
- 支付宝支付在国内算是大家了,我们到处都可以使用支付宝了,下文整理介绍的是在安卓app应用中使用支付宝进行支付的开发例子。 之前讲了一篇博客关与支付宝集成获取...2016-09-20
- PHP+Ajax有许多的功能都会用到它小编今天就有使用PHP+Ajax实现的一个微信登录功能了,下面我们来看一个PHP+Ajax手机发红包的程序例子,具体如下所示。 PHP发红包基本...2016-11-25
- 华为手机怎么恢复已卸载的应用?有时候我们在使用华为手机的时候,想知道卸载的应用怎么恢复,这篇文章主要介绍了华为手机恢复应用教程,需要的朋友可以参考下...2020-06-29
- 获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon,所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现:http://www.google.com/s2/favi...2014-06-07
- 很多用安卓智能手机的朋友是用九宫格锁屏,网上也有暴力删除手机图形锁的方法,不过我们可以用程序来破解。本文只提供技术学习,不能干坏事 安卓手机的图形锁(九宫格)...2016-09-20
- 华为手机怎么开启双时钟?华为手机是可以设置双时钟的,如果来回在两个有时差的地方工作,是可以设置双时钟显示,下面我们就来看看华为添加双时钟的技巧,需要的朋友可以参考下...2020-12-08
安卓手机wifi打不开修复教程,安卓手机wifi打不开解决方法
手机wifi打不开?让小编来告诉你如何解决。还不知道的朋友快来看看。 手机wifi是现在生活中最常用的手机功能,但是遇到手机wifi打不开的情况该怎么办呢?如果手机wifi...2016-12-21mac下Apache + MySql + PHP搭建网站开发环境
首先为什不自己分别搭建Apache,PHP和MySql的环境呢?这样自己可以了解更多知识,说起来也更酷。可也许因为我懒吧,我是那种“既然有现成的,用就是了”的人。君子生非异也,善假于物也。两千年前的荀子就教导我们,要善于利用工具...2014-06-07- 我要实现的就是下图的这种样式,可参考下面这两个网站的留言板,他们的实现原理都是一样的畅言留言板样式:网易跟帖样式:原理 需要在评论表添加两个主要字段 id 和 pid ,其他字段随意添加,比如文章id、回复时间、回复内容、...2015-11-08
网站广告怎么投放最好?首屏广告投放类型优化和广告位布局优化的案例
网站广告怎么投放最好?一个网站中广告位置最好的是哪几个地方呢,许多的朋友都不知道如何让自己的网站广告收效最好了,今天我们就一起来看看吧。 在说到联盟优化前,...2016-10-10华为手机蓝牙可以连接几个设备?华为设置蓝牙音频连接个数的技巧
华为手机蓝牙可以连接几个设备? 华为手机使用蓝牙的时候,想要知道能连接几个设备,这都是可以设置呢?下面我们就来看看华为设置蓝牙音频连接个数的技巧,需要的朋友可以参考下...2020-12-08- 小米手机负一屏该怎么设置?小米手机最近推出了负一屏的功能,集成了很多信息,可以放一些需要知道的信息,下面我们就来看看详细的教程,需要的朋友可以参考下。 最新的开...2016-12-15
oppo手机怎么设置充电提示音 oppo手机充电提示音设置方法
oppo手机充电提示音怎么关闭?用户要学会充电提示音的设置方法,这样才能熟练的操作更换提示音或者是关掉提示音,关于OPPO手机充电提示音的设置下面会有具体的介绍,各位用户一起来看看详细的操作方法吧...2020-12-08- 钉钉怎么双开登录两个账号?钉钉中想要双开登录两个账号,该怎么登录呢?下面我们就来看看小米手机双开钉钉的技巧,需要的朋友可以参考下...2020-06-29
- 保千里打令VR手机怎么样?什么时候发布?全球首款VR手机保千里打令VR手机将于10月24日在深圳大梅沙国际水上运动中心隆重发布,对保千里打令VR手机不太了解朋友可以看看...2016-11-01
- 下面小编就为大家带来一篇老生常谈javascript变量的命名规范和注释。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-02
- 明明我的手机配置那么高(都八核了)为什么玩游戏还会卡?对安卓手机来说玩游戏卡顿的原因一般有两种;性能不足导致的卡顿以及CPU发热降频导致的卡顿,详情我们来看看吧...2017-07-06
- 本章节讨论使用ES6编码风格到代码中需要注意的点。通过记住这些关键点,可以让我们写出更优美的、可读性更强的JavaScript ES6风格的代码。...2021-05-08
- 您是否遇到过孩子想要玩手机又不好拒绝,或者是您想要给孩子配一个联系用的手机有担心孩子玩手机上瘾?如果您购买的是小米手机,那么MIUI的儿童模式就能很好地解决这个问题...2016-12-21
- 个人网站建设应该考虑哪些问题呢?这个问题我们先在这里不说,下文会一一列出来,希望这些建义能帮助到各位同学哦。 我相信VIP成员里面有很多站长,每个人几乎都拥有一个...2016-10-10