首页 > 教程 > 关键词 > HTML5移动页面最新资讯 > 正文

玩转HTML5移动页面(优化篇)

2015-04-28 11:16 · 稿源:腾讯ISUX

承接《玩转HTML5移动页面(动效篇)》,上次说的是让页面动起来的一些小技巧。

而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏。

(1) 动画雪碧图

涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)!

网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gulp也提供了相应插件。

特别地,如果单张雪碧图面积实在太大,可以拆分雪碧图,例如拆分成2-4张,因为现代浏览器都支持4-6个同源请求下载,若资源实在太多,也可以考虑把静态资源放在不同源域名下去请求,这里牺牲多几个请求换来图片同时加载比一张图片慢慢加载要好,当然,这需要具体情况去衡量。

顺便提一下,我写动画的一个小技巧是把每一页的动画分在一个import.css里面,然后最后在主样式中import进去,这样方便调试动画,也容易维护,例如:

//style.css @import url("reset.import.css"); @import url("loading.import.css"); @import url("m-animate-1.import.css"); @import url("m-animate-2.import.css"); @import url("m-animate-3.import.css");

当然,import不是原生支持的,这里需要一些流程化工具让import的页面在输出之前经过组装-压缩的步骤。

(2)  图片压缩

图片压缩是老生常谈,但是仍然有不少人忘记压缩,那可是活生生的带宽和流量的浪费啊…

压缩图片需要有好工具,有智图,TinyPNG,JPEGmini等等。

依靠工具外,还有以下方式可以优化图片:

1.尽量避免用PNG24。如果图片色彩要求不高,请使用PNG8;

2.使用新格式,WEBP和BPG等新格式的到来,在不用考虑兼容的情况下请大胆尝试;

3.用SVG和ICONFONT代替简单的图标;

4.用FUFU的字蛛来代替艺术字体切图。

(3)多终端兼容

多终端兼容是一切的根基,要知道有人拿着肾6+,有人拿着肾4,大则414×736,小则320×416(IPHONE4在SAFARI保留上下端导航),因此多终端兼容是十分必要的。

曾经有一种派系为320派系,就是大部分页面都是320宽度,因此干脆直接用320的容器来包一切页面,那样也简单,然而IPHOEN6和IPHONE6+的出现简直是灭了这个派系。

那么到底要如何兼容呢?

这里我分了三个时期来说说:

A.设计初期。先审视设计稿,因为320派系的原因,大部分设计稿只考虑到IPHONE5来设计,因此很多背景元素是只有320px宽度(页面实际渲染宽度),例如下图。

那么,这时候就需要设计提供一个较长的延伸背景了,最好是可以重复的,用background-repeat可以减少图片大小。

B.设计中期。也就是具体的兼容方法,可以使用CSS3 Media Query和类覆盖。

1.CSS3 Media Query,按范围兼容机型。

/*iphone6*/ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { .page6 .ele-building{top: 69px;} .page6 .ele-runner{top: 100px;} .page6 .ele-pophome{top: 16px;} }

2.类覆盖,这种方式适合直接为小屏或大屏做整体兼容。

首先,为小屏(大屏)加一个识别类,这里小于420表示为小屏幕(IPHONE4有上下导航栏):

var bh = $(window).height(); // 480 - 64 = 416 iphone4 if(bh<420){ $('body').addClass('low-screen'); }

然后,对应识别类加上要变动的元素覆盖,例如:

.page6 .ele-bg{top: 10px;} .low-screen .page6 .ele-bg{top: 0px;}

C.设计后期。这是最后一步,整体检查和体验,这里面会暴露一些问题,例如元素在IPHONE6P显得小了或者元素在IPHONE4挤不下了,可以来最后大招解决:

1.大屏适当用zoom:(倍率)或者transform:scale(倍率)来增大元素,实测失真根本看不出来,设计师也满意(毕竟不用多做一张图!);

2.小屏适当去掉一些元素,例如一些翻页提示,一些多余图标,可以让优雅降级,把它们 display:none掉。

有以上几步,基本就能兼容大部分机器了。兼容一直是个苦活,但是这是前端必修课,多练就会发觉其实也没有那么难嘛。

(4)交互提示

前面说了,加了音效就要加上音乐切换开关的按钮,不然会被用户骂死。还有其他,例如如果你的页面不能兼容横屏,请监听横屏状态,然后加上适当的横屏提示。

例如:

// 横屏监听 var updateOrientation = function(){ if(window.orientation=='-90' || window.orientation=='90'){ $('.landscape-wrap').removeClass('hide'); console.log('为了更好的体验,请将手机/平板竖过来!'); }else{ $('.landscape-wrap').addClass('hide'); console.log('竖屏状态'); } }; window.onorientationchange = updateOrientation;

提示越多,界面越友好,有时候设计师会漏掉一些可能出现的页面情况。

作为有态度的前端,请好好把关,让用户有好的体验

(5)分享接口

H5做好了,要传播分享才能展示你的牛逼轰轰。

然而分享其实是个坑,分享到微信、手Q等都有各种问题。

A.微信

旧微信会使用WeixinJSBridge来声明分享的缩略图、标题、正文等,比较方便。例如:

而最新的微信提供了新的微信SDK,需要在公众账号绑定所属域名之后调用SDK作分享,可以说分享功能会更加强大,坑也会更加少。

B.手Q

手Q支持声明meta标签的的分享方式,例如:

而若在qq.com域名下也支持api的定义方式。

C.一般化分享

在默认兼容旧版微信、手Q或者各种浏览器,平台,可以用这样的方法:

写h1做标题,p做内容,img做缩略图,只需要把h1隐藏掉就好,这里的缩略图最好要大于200x200px。

例如:

当然,这样也有利于搜索引擎拉取信息。

分享的坑还有更多,例如不同浏览器例如QQ浏览器、Chrome也会有自己的默认拉取方式(部分截图作缩略图),需要多加测试优化。

(5)SEO搜索引擎优化

SEO(搜索引擎优化)的基本做法是把页面结构写好,这包括:

1.定义精确的网页标题。你的标题应该有概括性,能明确告知搜索引擎和用户你的网站大概内容和目的,可以是当前页面标题-所属类型-产品名,例如“全民来猜歌-年费黄钻-QQ空间”。

2.针对页面内容补充description和keywords的meta标签。你需要简短总结页面的主要目标,然后补充description,以及根据关键词补充keywords。

3.优化你的超链接和图片。包括优化超链接显示的文本,要具有语义性也要跟超链接的网页具有相关性,例如“空间主页”就不要链接到“www.qq.com”。同时,要补充”title”和”alt”属性,例如“<img src=’images/apple.jpg’ title=’苹果示例图’ alt=’苹果示例图’ />”。

4.建立良好的网站导航和sitemap。网站需要有一个良好的导航,控制根目录和各子目录的关键,通过sitemap可以帮助网站主了解网站结构,也方便搜索引擎收录整个站点。

5.优化目录结构和URL。你的URL应该有语义性,简短易懂,例如http://www.apple.com/macbook-air/,而且每一层级都要有它对应的页面展示以及语义。

6.善用h1-h6的标题结构树。合理的标题可以强调文字,也能让搜索引擎更加了解到各标题的重要性,因此建立良好的标题树十分有意义。

7.不断致力于提供优质的内容。社交化分享是网站曝光最快的因素,因此不断提供了优质原创内容才能真正提高你的网站曝光权重。

(6)无障碍

无障碍的普及是一件好事,这让互联网真正地为所有人可用。因此我们也应该为之而努力,无障碍的根基是你页面强壮的语义性和结构性,具体可以参考《腾讯网无障碍说明》了解无障碍的优化手段。

最后,罗嗦了这么多,只是我自己的一些小经验,请轻拍砖,多交流。

网友热搜:

  • 相关推荐
  • 大家在看
  • 马斯克放狠话:特斯拉一年内实现L5级自动驾驶

    被称为硅谷“钢铁侠”的特斯拉CEO马斯克再放狠话。日前,在2020世界人工智能大会开幕式上,马斯克表示:“我对未来L5级自动驾驶非常有信心,特斯拉有望在一年内完成L5级自动驾

  • 马斯克世界人工智能大会发言:今年有信心完成L5级别自动驾驶功能开发

    在今日召开的2020世界人工智能大会云端峰会上,特斯拉公司创始人兼首席执行官马斯克通过远程视频表示,特斯拉未来非常有信心实现L5 级别自动驾驶,甚至是完全自动驾驶。今年有信心完成L5 级别自动驾驶基本功能的开发。

  • HTC VIVE与ARVI VR携手拓展全球VR线下游戏版图

    全球创新技术领导者HTC VIVE?于今日宣布与VR线下娱乐内容的重要开发商ARVI VR开展深度合作,在全球范围内推广ARVI的VR密室逃脱游戏,共同拓展VR线下游戏市场,三年内有望触达数百个线下娱乐(LBE)场所,届时广大消费者将能够亲身体验逼真的互动式VR游戏。为了顺应密室逃脱游戏的迅速发展,自 2019 年 3 月起,HTC Vive就已经获得ARVI VR密室逃脱游戏的独家代理权。ARVI VR作为知名的密室逃脱游戏制作公司,相继开发了多款优质的VR密

  • 用户强烈要求下:微软让Edge地址栏重新显示“http://”和“www.”

    Edge浏览器变的更简洁了,但用户一点都不买账。Edge Canary 频道最新版本中做了一项很小但非常重要的调整:在地址栏上隐藏了“http://”或者“www.”,目的是让 URL 地址

  • 新Edge浏览器简化网址显示:默认隐藏http://www

    微软新Edge浏览器推出后得到好评,因为Canary/Dev等预览通道的出现,其软件更新速度也很快。日前,Canary版Edge出现变化,地址栏简洁化,默认隐去了http://www的网址前缀。想要查看包含协议

  • 毛老子固件内嵌花生壳PHTunnel,内网穿透实现局域网应用

    固件作为硬件设备的“灵魂”,担任着系统最基础、最底层的工作,决定着硬件设备的功能及性能,老毛子Padavan固件就是一款颇受技术控喜爱的路由器固件。 因为是基于开源项目的二次编译,老毛子固件比一般路由器自带的原厂固件功能更多、更强大,可用性和稳定性也还不错,不少爱折腾的技术控纷纷把自家的路由器刷成了老毛子固件,用起来表示“真香”。 在老毛子固件集成嵌入的多种功能中,「花生壳PHTunnel」是较受欢迎的一个,特别

  • 七爷:HT被低估时间越长,通缩拐点到来后的反弹力度就越大

    7 月 17 日晚,火币全球站CEO七爷在做客 BitUniverse 币优V姐访谈AMA直播,主题为“和七爷聊聊燃烧的HT”。直播中,七爷从他在清华创业经历开始,聊到区块链行业未来展望,涉及话题包括投资与趋势、初遇比特币、HT销毁与价值、火币重启上币、DeFi等。在本次直播中,七爷透露以下九大要点:1. 对于腾讯、特斯拉、比特币,相关一部分人都在早期判断出了价值,但并没有坚持持有。这就是人性。2. 截至 2020 年上半年,火币已累计销毁了

  • 亚马逊开放PS5全线产品预订页面:主机、游戏和配件齐全

    虽然传言索尼于北京时间今天下午公布PS5价格、预订细节的传言宣告破灭,但细心的网友注意到,亚马逊澳大利亚悄然上线了PS5全线产品预订页面。所谓全线产品既包含主机本体、也有无光驱数字版、

  • 中国最休闲城市:1/5长沙人每天5小时以上休闲时间

    央视财经《中国经济生活大调查(2019-2020)》即将于今晚21:30正式发布。赶在发布前,央视这两天也公布了部分数据。报告显示,在每天能拥有5个小时以上休闲时间的城市排名中,长沙人比例最高(

  • 无需公网 IP,花生壳 PHTunnel 助力 NAS 厂商低成本打造互联互通解

    原标题:无需公网 IP,花生壳 PHTunnel 助力 NAS 厂商低成本打造互联互通解决方案!数字经济的蓬勃发展,深刻改变了人们的生产和生活方式,无论工作、生活、学习还是娱乐,都离不开数据的支撑。随着数据体量的逐渐增大,也给存储体系带来前所未有的机会和挑战,云存储的概念逐步进入大众视野,NAS作为专业的云存储设备,以安全、高效、用途广的优势受到大众青睐。在为人们提供海量数据存储的同时,为方便用户随时随地远程访问数据?

  • 华为郭平:聚焦5G商业成功 充分释放5G网络红利

    7月27日消息,今日,华为轮值董事长郭平在2020共赢未来全球线上峰会上做开幕致辞,他表示,业界需5 “机” 协同,聚焦5G商业成功,充分释放5G网络红利。华为轮值董事长郭平做开场致辞 新冠疫情的爆发,给全球人们的生活、工作带来巨大影响,对全球经济带来巨大冲击。ICT技术在抗疫的方方面面能发挥巨大的作用。郭平表示:“作为一家ICT公司,我们有责任利用技术,和客户、伙伴一起抗击疫情,帮助运营商及企业客户,通?

  • 免费集成内网穿透,花生壳PHTunnel助力冠航私有云实现远程访问!

    万物互联时代,人们对各种网络应用和IoT设备提出更高要求。NAS作为专业的云存储,必须突破内网限制,满足人们远程办公场景下随时随地访问数据信息的需求。 杭州冠航科技有限公司旗下的私有云存储网关,是一款集成了企业级路由器、无线ac控制器、sd-lan异地组网、企业数据存储的多功能智能网络设备,为中小企业提供高速、安全的数据存储解决方案。但要突破内网限制,满足没有公网IP用户外网访问数据存储需求,是冠航科技一直以来面

  • 经典重现!HTC野火E2曝光:联发科P22处理器 水滴屏

    提起HTC WildFire(野火)系列相信70、80、90后都不会陌生,刚刚盛行安卓智能手机的时代,HTC WildFire绝对是小尺寸神器。7月16日,据外媒报道,HTC野火系列将推出新机,这款手机已经现身Goog

  • 5G资费降至69元 全民如何追新5G?京东小魔方带你看懂5G新品消费

    5G时代来了。 你还在单纯的以为5G只是一朵高岭之花吗?NO,不知不觉中,它已经渗透入了日常生活的方方面面。5G带来的不仅仅是使用体验的改变,它更带来了潮流的变迁,比如,你能想象银发群体已经冲到了5G潮流一线吗?你能想到5G手机在西部城市渗透率最高吗?你知道5G用户规模增长最快的是四线城市吗?日前,京东小魔方联合京东手机、智能供应链Y业务管理部发布了《 2020 年京东5G新品消费趋势洞察》,探索5G新生长的风向标,让追新之?

  • 5G丨诺基亚宣布成为亚太电信5G网络唯一供应商

    8月4日消息,据国外媒体报道,芬兰电信设备制造商诺基亚宣布,它已被中国台湾移动运营商亚太电信(APT)选定为唯一的5G(NSA/SA)供应商。亚太电信计划在今年晚些时候推出5G服务,并计划为其订阅用户提供云游戏、虚拟现实、增强现实和流媒体服务。据悉,诺基亚将支持亚太电信实现雄心勃勃的5G目标,具体来说将为其提供5G无线接入网络(RAN)和核心解决方案。此前,诺基亚曾表示,它是全球唯一拥有端到端产品组合的供应

  • 5G技术普及时代开启!联通自主定制5G CPE上市!

    CPE,英文全称为Customer Premise Equipment——客户前置终端设备。5G CPE提供移动运营商5G通信网和用户端Wi-Fi局域网之间的对接服务。直观来说,如果原来您家里的传统路由器是把有线宽带网络转成供笔记本、手机等使用的 Wi-Fi 网络,那么CPE还可以做的,是将 4G、5G无线蜂窝网络做了一次延伸和转换,然后以 Wi-Fi 网络的形式提供给手机、笔记本等各类终端上网。联通自主定制5G CPE来了中国联通5G CPE VN007 是中国联通上市销售的?

  • 99%的用户今年没必要上车5G!5G手机+4G套餐更香

    7月14日,回收宝手机价值研究院发布了“2020年上半年手机价值指数”白皮书。回顾了上半年的新机市场与二手机市场,为消费者还原了今年手机市场的全貌。白皮书显示,从今年年初开始,

  • 高通发布Quick Charge 5快充技术:0至50%电量仅需5分钟

    7月28日消息,日前,高通宣布面向Android终端推出最快速的商用充电技术Quick Charge 5,与前代平台相比,该平台不仅能够为智能手机提供前所未有的充电速度与效率提升,同时还支持一系列全新电池技术、配件和安全特性。据悉,Quick Charge 5有望成为面向智能手机提供100W以上充电功率的首个商用快充平台,可以帮助用户实现手机从零电量充至50%电量仅需5分钟。据官方介绍,Quick Charge 5的性能较前代平台充电效率提升70%

  • 《战神5》在列 索尼两款重磅独占曝光:PS5之父参与制作

    通过昨日的Xbox Game Showcase活动,微软展示了一批一方游戏,同时也宣告食言,因为至少有5款以上的大作并不会登陆Xbox One……索尼这边,话从没说得那么满,而且坚持独占战略。

    PS5
  • 法国表态不会禁止华为在法投资5G 华为5G最新消息

    法国表态不会禁止华为在法投资5G是什么情况?据路透社 7 月 21 日最新消息,法国财政部长勒梅尔当天表示,法国不会禁止华为在法投资5G。此前英国上周宣布将禁用华为后,其他欧洲国家对待华为的态度也受到关注。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签