在互联网营销的时代下,大部分企业除了自己的官网之外,也有建设手机网站,在移动用户比PC端用户多的情况下,企业又该如何去优化手机网站呢?其实手机网站建设都有一系列的注意事项,那么手机网站建设过程中注意事项都包含什么呢?下面让我们一起来看看吧!

 

首先我们先说一下pc端和移动端的不同。

一: PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化。

二: 在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理,这样的问题在PC端都是遇不到的。 

三: 在布局上,移动端开发一般是要做到布局自适应的,我使用的一直是rem布局,感觉很好。

四: 在动画处理上,PC端由于要考虑IE的兼容性,所以通常使用JS做动画的通用性会更好一些,但是CSS3做了很大的牺牲, 而在手机端,如果要做一些动画、特效等,第一选择肯定是CSS3 既简单、效率又高

五:  微信的一些接口组好能去实现一遍,熟悉一下肯定是有好处的,比如通过微信分享文章,title、description、icon等图标的配置,这些还是要会的。

 六: 百度地图的一些API接口,也得去实现一下,这些对于移动端来说,LBS是一个非常重要的特性,所以地图这块肯定是要了解的,在加上百度地图这块已经是一个比较成熟的平台了,所以学起来也比较容易。

七、一般PC端用jquery,移动端用zepto,因为移动端的流量还是比较重要的,所以引入的资源或者插件,能小则小,一个30k的资源和一个80k的资源,在移动端的差别还是挺大的。未压缩的jquery是262kb,压缩的jquey是83kb。未压缩的zepto是54kb,压缩的zepto只有9kb。

 

好吧,我们下面再具体说几样PC端应该注意的地方。

一、布局。
  PC端和移动端的布局的思路还是比较不同的。如果最初没有考虑好移动端布局的思路,在后期兼容性等完善过程中将会超级痛苦。
  在PC端我们很常见的一种布局思路如下:将网页主题设为固定宽度,居中,并定义最小宽度,可适配各种大小的PC端屏幕。由于PC端可视范围较大,所以上述方法可行,但是移动端完全不同,移动端的屏幕本身就比较小,所以我们必须全部利用起来。移动端的页面一般来说结构都会比较简单,下面分结构介绍两种布局:
(1)居中

   一般banner或者按钮等元素都会定义为居中布局。在ps中量好外边距后,直接给元素设置margin,如:margin: 0 10px; 无需设置宽度,元素会自动撑开,且在任何屏幕上都会有相同10px的左右外边距。

(2)多个元素水平排列
  如果有四个元素需要水平排列,怎样做到在任何移动端都能够漂亮的排列呢?很简单,将每个元素都设置成25%的宽度并居中,就能达到上述的效果。
  比较复杂一点的,如果是六个元素呢?经过简单的计算,每个元素都定义为16%的宽度,这样总共是16%*6=96%,剩下的4%再给两边的元素各加2%的外边距就ok了。
  如果你想实现更加完美的效果,比如使图片跟随手机屏幕的大小变化,则可以给图片设置相对宽度,并使高度自动伸缩,则可以达到以上效果。

二、HTML5标签的使用

在开始编写webapp时,建议前端工程师使用HTML5,而放弃HTML4,因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验,可以减少开发者很多的工作量,当然了你决定使用HTML5前,一定要对此非常熟悉,要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签,定义导航条或选项卡可以直接使用nav标签等等。 

三、放弃CSS float属性,使用flax布局

在项目开发过程中可以会遇到内容排列显示的布局,假如你遇见这样的视觉稿,建议你放弃float,可以直接使用display:inline-block。或者使用flax布局。

四、自适应布局模式

在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,我建议前端工程师使用自适应布局模式(支付宝采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示,你无需再次考虑设备的分辨率。

五、学会使用webkit-box

上一节,我们说过自适应布局模式,有些同学可能会问:如何在移动设备上做到完全自适应呢?很感谢webkit为display属性提供了一个webkit-box的值,它可以帮助前端工程师做到盒子模型灵活控制。

 六、如何解决盒子边框溢出

当你指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小,包括边框的宽度。

 七、移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效。它的解决方案有:
fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块,tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序
1、ontouchstart 
2、ontouchmove 
3、ontouchend 
4、onclick
解决300ms延迟的问题,也可以通过绑定ontouchstart事件,加快对事件的响应
八、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。
 
 九、文字垂直居中
在PC端开发时,比较常用的方法为设置相同的height与line-height。但是在移动端,如果在某些容器中使用此类方法,你会发现文字在某些机型上跑偏了二里地。
从这个现象可以看出,移动端的浏览器对于css的解析确实没有PC端完善。原来以为IE三兄弟(IE6、IE7、IE8)是最坑的了,没想到被移动端的无数个兄弟完爆了。
言归正传,如何解决上述问题呢?微信采用的是在需要垂直居中的容器外套一层div,使用盒模型强制将其内部容器垂直居中。 
另外就是在input中尽量不使用line-height,避免引起placeholder垂直位置偏移。
十、空div在低端安卓显示不出来问题
在开发过程中发现了这样一个奇怪的问题:有些无内容的容器已经设置了高度与宽度,也设置了背景图,但是在安卓低端机上就是无法显示。目前解决方案自我感觉非常山寨:将高度或宽度换成对应的padding,将容器撑起来。虽然山寨,但是实践验证了,这种方法非常好用。
大概就是这么一些,更多的东西在不同的环境下要求也会不同,等待着你去开发和完善,希望我的文章对你有帮助。
欢迎楼下就坐,点赞加关注哟!