强烈推荐!教你测试手机网页的五大方法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
强烈推荐!教你测试手机网页的五大方法
谷一商盟学院，网络整合营销第一品牌！|
总评分0.0|
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩3页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢HTML5移动端手机网站开发流程
最近一直在研究移动手机网站的开发，发现做手机网站没有想象中的那么难。为什么会这么说呢？我们试想下:我们连传统的PC网站都会做，难道连一个小小的手机网站难道都搞不定吗？其实手机网站就是一个微缩版的PC网站罢了！至于为什么觉得难、觉得无从下手。段亮觉得有以下几点：一、没有完整的思路和流程就像做一样，如果你能知道它的流程，我相信就不会觉得做手机网站难！真正难的是你没有思路。二、把html5这门技术想的高深莫测好像觉得学会用html5+css3做手机网站，就相当于学会了顶尖的绝世武功。其实你错了！不要把html5这玩意想的太高深，其实做手机网站，真正意义上用不到什么的html5的强大功能。(可能对于一些不懂什么技术的小白而言：你的手机网站是用HTML5+CSS3做的啊，简直牛逼呀！能用上目前互联网上最新最前沿的技术。其实明眼人一看，就知道是用什么技术做的。俗话说的好：&外行看热闹，内行看门道&)好了扯了这么多，下面就说说怎么来开发移动手机网站吧！基本上开发手机网站，可大致分为两大类。一类是用框架开发手机网站。一类是自己手写手机网站。一、框架开发手机网站一般用现在常用的开发框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..当然可能还有一些移动端开发的框架，这些我就没具体去研究过。为什么说BootStrap是目前前端最火热的开发框架呢？因为bootstrap自带响应式布局（栅格系统），而且能做到移动设备优先的原则。运用bootstrap来开发网站有什么好处呢？1.不懂设计也可以做网站就算不懂设计，你的网页在Bootstrap的帮助下，也能拥有超高颜值。它强大的内置样式库让你的作品变成尤物。主要体现在：字体文件和bootstrap自带的UI样式。（为广大不会UI设计的程序员，提供了福音）2.上手快你可以专心解决问题，冗繁的细节都丢给Bootstrap操心。可以做到一次开发，就可适配所有终端，并且能迅速上手并建出网站原型。还提供很多丰富的插件，就算你不会JS，基本能看懂常见的API，网站上的效果，基本能解决。缺点：1.不遵循最佳实践我们在使用Bootstrap时遇到的最大问题之一是你的DOM元素上将拥挤大量的类。这打破了良好的web设计基本规则之一，HTML不再有语义，而且内容和表示不再分离。前端纯粹主义者会觉得这相当令人讨厌，以为它使可扩展性、重用性和维护性遇到了更大的挑战。2. Bootstrap 太重直接点说：就是CSS和JS有点点大。CSS压缩后115k,JS压缩后35k如果你想要使用Bootstrap的所有功能，你应该好好考虑资源的加载时间。当然，对于一些地方这可能不是问题，但是在新西兰互联网不得不横跨太平洋，这时数据达到那儿将是很缓慢的。因此考虑你的目标市场。相信任何框架都有它的优点，同时也是有它的缺点的。没有一个产品是很完美的，所以根据自身实际情况进行选择。至于一些其它框架暂时不做过多的解释了，相信只要你肯愿意百度一下，就可以找到你想要的答案。二、手写手机网站一般我们自己手动开发手机网站的话，基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现（网页指html5的格式来开发）。另一类是通过CSS3的Media标签（媒介查询）来实现。不了解媒介查询的朋友，可以看看这篇文章：。在这里我们详细讲解下,利用添加meta标签来做手机网站。基本在网页头部我们只需添加四个meta标签就可以实现一个手机网站的框架。我一起来看看是哪些meta标签。1、添加viewport标签
&meta&name=&viewport&&content=&width=device-width,&initial-scale=1.0,&maximum-scale=1.0,&user-scalable=0&&/&详细属性：width&&----&&viewport的宽度（width=device-width意思是：宽度等于设备宽度）
height&------&&viewport的高度（height=device-height意思是：高度等于设备宽度）
initial-scale&-----&初始的缩放比例
minimum-scale&-----&允许用户缩放到的最小比例
maximum-scale&-----&允许用户缩放到的最大比例
user-scalable&-----&用户是否可以手动缩放关于viewport的详细原理和知识点，各位就百度吧！在这里我就不做详细的讲解了。2、禁止将数字变为电话号码&meta&name=&format-detection&&content=&telephone=no&&/&一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！3、iphone设备中的safari私有meta标签&meta&name=&apple-mobile-web-app-capable&&content=&yes&&/&它表示：允许全屏模式浏览，隐藏浏览器导航栏4、iphone的私有标签&meta&name=&apple-mobile-web-app-status-bar-style&&content=&black&&它指定的iphone中safari顶端的状态条的样式默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：&link&rel=&apple-touch-icon-precomposed&&href=&/wap30/info/info5/img/logo_icon.png&&不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。手机网站基本框架代码：&!doctype&html&
&meta&charset=&utf-8&&
&title&手机网站&/title&
&meta&name=&keywords&&content=&&&/&
&meta&name=&description&&content=&&&/&
&meta&name=&viewport&&content=&width=device-width,&initial-scale=1.0,&maximum-scale=1.0,&user-scalable=0&&/&
&meta&name=&format-detection&&content=&telephone=no&&/&
&meta&name=&apple-mobile-web-app-capable&&content=&yes&&/&
&meta&name=&apple-mobile-web-app-status-bar-style&&content=&black&&
&meta&name=&author&&content=&duanliang,&&&/&
&&&&body{font-size:62.5%;font-family:&Microsoft&YaHei&,A&overflow-x:&overflow-y:}
&&&&.viewport{&max-width:640&min-width:300&margin:0&}
&&&&&&&&大家好！我是段亮，这是我的第一个手机网页哦！
&&&&&/div&
&/html&下面是我做的基于微信二次开发的手机页面案例：其实在移动端的开发让我纠结的是在字体单位上的选择。随着CSS3的兴起，有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。这点我也不是很清楚，也请教了一些做手机网站的高手，了解了一些信息。原来大部分的人依旧是使用PX来布局，rem都用的少。目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。关于手机网站的调试问题一般我们采用的：在浏览器调试+真机测试，因为浏览器毕竟只是一个模拟工具，实际开发的话，我们还得用真机去测试。比如：（Android类手机，iPhone5、5s、6、6Plus...）而在浏览器上测试，可以chrome（谷歌浏览器）的F12调试工具：有个手机样的小图标，点击就能模拟手机测试。如下图：或者用火狐的测试工具：按shift+ctrl+M进行查看。写在最后：其实等你真正熟悉做手机网站这套流程后，你会发现做手机网站没有你想象的那么难，真正难的是不知道如何去下手。对于移动端的JS效果可能和PC端有些不同，因为移动端有移动端的事件，这也是我为什么老是强调学JS，是学原生JS，而不是学Jquery。我的下篇文章就会讲到&为什么学JS要学原生JS&，喜欢的朋友可以下博客。(以上均是段亮个人经验，如有不足的地方可以指出，相互学习！)觉得本篇文章，对你有帮助的话。你可以选择赞助段亮博客！支付宝： 因为有你的支持，我才走得更远！ (*^__^*) ...本文由段亮博客原创出品，如需转载请注明出处。本文出处：
如果您觉得文章对你有帮助，可以进行打赏。
打赏多少，您高兴就行，谢谢您对段亮这小子的支持！ ~(@^_^@)~
微信扫一扫
支付宝扫一扫
把此文章分享给其它人..
或许你还喜欢以下内容:
你也想建立一个独立博客？相关文章推荐
更新 今天用Unity5.3.6发现一个简单的方法，在打APK的时候勾选如图两项，打出来的包装在手机用数据线或WIFI连接unity的Profile，只要在手机上运行游戏Unity...
步骤和方法:
1、打开控制面板，选择并进入“程序”，双击“打开或关闭Windows服务”如图所示：
2.在弹出的窗口中选择“Internet信息服务”下面所有地选项，点击确定后，开始更新服务.如图...
用vs 新建webservice运行的时候出现如下错误
解决的办法是在项目的Web.config文件中添加
1.运行成功后发现把地址中localhost 改成...
1、Xenu Link Sleuth
http://home.snafu.de/tilman/xenulink.htm
目前，最流行、最知名的工具。可以打开一个本地网页文件来检查它的链接，也可...
很多前端做手机页面都有类似的困扰，就是测试起来特别麻烦
开始的时候都是数据线连接手机到电脑，安装个手机助手，然后把项目考到手机本地存储里，再从手机打开查看，虽然有点麻烦，但还在android机上还...
作为一名Android开发者，不管怎么说，都会经历使用Android真机来测试连接本地服务器这样的事情。这里所说的“本地服务器”大多数时候指的是：搭载有某种服务器软件的PC，例如搭载有...
还记得在写iOS苹果设备的App时，程序有两种测试方法，一种模拟器测试，一种真机测试。我们可以不用上线，通过断点和测试单元，配合模拟器或者真机，就可以很方便的知道我们写的App的成效，已经出现的状况，...
移动端HTML5游戏性能优化
戴嘉华 created
on NOV 01, 14 last
updated on NOV 01, 14
canvas应用之各种游戏转盘
转盘的画法网上有很多，好多都是H5或CSS方式实现的，我这里是Android中实现方式，也算是多种转盘形式集合吧，对canvas的绘制能力的提高会有一定的帮助。先来看下...
他的最新文章
讲师：Array
讲师：李志伟
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)WAP网页的浏览测试 - 手机中国
谁是手机上网霸主 安卓手机浏览器横评
作者：王鑫
WAP网页的浏览测试
　　浏览器的用处还是浏览网页，所以网页的浏览效果对于用户来说至关重要，为此我们选择了5个用户常用的WAP网页来测试网页的浏览效果，测试项目包括了网页的显示排版以及网页的操作，现在的网络速度越来越快，也有更多的网站开始使用专为触屏设计的WAP页面了，所以此次测试我们选用了5个常用的WAP页面来测试网页的兼容性。
&360安全浏览器
百度浏览器&
QQ浏览器极速版&Chrome
浏览器横评WAP网页浏览对比
360安全浏览器
百度浏览器
海豚浏览器
手机新浪网显示
手机新浪网操作
搜狐触屏版显示
搜狐触屏版操作
脚本滑动有问题
淘宝触屏版显示
淘宝触屏版操作
网易触屏版显示
网易触屏版操作
手机版显示
优酷手机版操作
脚本无法滑动
　　除了个别浏览器在浏览网页时出现问题外，大部分浏览器都能够胜任WAP网页的浏览，显示几款浏览器都没问题，但是在脚本的操作方面，百度和QQ浏览器出现了问题，其他部分使用正常。
提示：支持键盘“←&→”翻页
用其他账号登录：
请稍后,数据加载中...
请稍后,数据加载中...
上市时间：2017.11
上市时间：2017.09
上市时间：2017.10
上市时间：2017.10
上市时间：2017.11
上市时间：2017.09
上市时间：2017.09
上市时间：2017.11
上市时间：2017.10
上市时间：2017.11
上市时间：2017.11
上市时间：2017.09
上市时间：2017.09
上市时间：2017.11
上市时间：2017.11
上市时间：2017.09
上市时间：2017.09
上市时间：2017.09
上市时间：2017.10
上市时间：2017.10
热门搜索词
Copyright & 2007 -
北京沃德斯玛特网络科技有限责任公司.All rights reserved 发邮件给我们京ICP证-070681号 京ICP备号 京公网安备：京网文[8号