转载

手机网页布局经验总结

引言

众所周知，在当今移动互联网大行其道的现在，基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西，但是大家有没有想过这样的网页是怎样改制作出来的呢？今天我们就来探讨一下这个问题

阅读读者具备基础

1、熟练的使用HTML和CSS

2、对HTML5和CSS3有一定的了解，这个不必深入

3、掌握JavaScript、jquery脚本语言

如果还不能具备以上基础的读者们建议你们还是去网上找一下其他的一些相关的教学贴看一看，要不然可能会跟不上下面的学习了

HTML的特殊用法

首先我们先来讲解一下HTML中一些特殊的语法，可能对于还是HTML入门级的新手来说可能没见过，但是如大神那么请跳过这个模块

那么我们就先从这张图片说起：

手机网页布局经验总结

相信这张图片大家一定是不会陌生的，没错这个就是淘宝网的标题栏，其中的红色边框标出来的图标在这里是相当的抢眼，但是你知道这个是怎样制作的吗？

首先我们要准备一张，淘宝的logo图标，这张我们可以直接从百度上下载，下载地址

下载完成之后我们要将图片的格式转换成为ico格式，这个直接在网上查找转换工具就好了，地址

生成后将图片下载下来，重命名为taobaoLogo，新建一个HTML的项目，代码如下：

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>淘宝仿制</title>     <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" > </head> <body>      </body> </html>

运行的结果如下：

手机网页布局经验总结

从这个例子中我们可以发现，只要添加上依据语句就可以实现这个效果了，但是在实际的使用中，我们还需要添加上另一句语句，代码如下：

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>淘宝仿制</title>     <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" >     <link rel="icon" style="image/x-icon" href="taobaoLogo.ico"> </head> <body>      </body> </html>

运行的效果也是一样的

这里，细心的读者可能会问既然效果都是一样的，那么为什么要多此一举呢，这样做当然有这样做的必要，详见这篇文章，在此就不必啰嗦了

其中一般这个Logo图标不但可以运用在标题中，而且还可以放在收藏夹中去使用，只需要将添加标题栏中rel="short icon"改为rel="bookmark"即可

 <link rel="bookmark" style="image/x-icon" href="taobaoLogo.ico">

在手机网页的制作上，我们一般是不让用户手动的去改变页面的大小的，所以下面的这一句是必须加上的

 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

除了上面的这一句，下面的这些也是制作手机页面必须加上的

 <!--开启对web app的支持-->     <meta name="apple-mobile-web-app-capable" content="yes" /> <!--主要是正对苹果手机将数字自动识别为号码-->     <meta name="format-detection" content="telephone=no" />

除此之外，还有其他一些的属性供你自由的选择

 <!-- 忽略识别邮箱，主要是针对安卓手机会自动将符合邮箱格式的字符串识别为邮箱地址--> <meta content="email=no" name="format-detection" /> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" /> <!-- 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html --> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no">

获取滚动条的滚动值

       window.scrollY  window.scrollX

桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？就是上面两个属性，但是事实证明android也支持这属性，所以索性都用woindow.scroll.

禁止用户选择文本

 -webkit-user-select:none

这个属性是禁止用户选择文本，对安卓和苹果都是有效的

浅谈一下box-sizing

这个属性可能大家比较陌生吧，因为这个属性是是CSS3中新加入的，为了实现一种我们平时比较难实现的效果设定的属性

例如：我们在手机布局的时候，一般我们是采用百分比来对网页进行自适应的处理，也就是我们所说的自适应布局，我们可能有时会想要中效果就是，在左右内缩加上1px

 div{     padding-left:1px;     padding-right:1px;    }

但是采用自适应布局会出现把屏幕撑开，从而出现横向滚动条的效果，这个是我们在手机网页中开发的大忌，所以这个时候box-sizing就解决了我们的问题，具体的文法详见 http://www.w3school.com.cn/cssref/pr_box-sizing.asp

从box-sizing这个属性中我又联想到还有另外一个与box有关的属性就是box-shadow

box-shadow

这个属性虽然在手机网页中不是很常见，但是在网页中确实比较常见的，原因是移动端的网页显示的比较小，相对来说比较简洁，但是这个效果却是极好的，自从有了这个特性以后，望门就可以将网页是的特定元素实现得更具立体感，完成以前的一些没有办法实现的效果，具体详见： http://www.w3school.com.cn/cssref/pr_box-shadow.asp

base64编码图片代替URL图片

由于在网页加载的时候，没一张图片，都要进行HTTP资源请求，所以将图片进行编码，减小单次请求的流量，从而加快网站的加载速度，这个的实现可以使用在线的编码工具即可，地址：

http://www.fishlee.net/Tools/GetImageBase64Code#codeResult

手机拍照和上传图片

在HTML5中支持一些移动的新特性

移动端特殊的事件

在HTML5出现之后，有一些新的事件

touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel//当某种touch事件非正常结束时触发

执行事件的顺序：touchstart>touchmove>touchend>touchcanel>click

从上面的顺序我们不难分析出：在点击的时候，click会发生延迟，这样的延迟一般是300ms。

手机图片和视频上传

 <!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">

移动端不同的input对应不同的键盘

ios —- android

type email

手机网页布局经验总结

type url

手机网页布局经验总结

type search

手机网页布局经验总结

动画特效开启加速

默认的移动浏览器是不会开启动画效果硬件加速的，但是这样的效果在低端的安卓手机中可能会出现意想不到的反效果

动画加速可以采用，下列代码

 .div {    -webkit-transform: translate3d(0, 0, 0);    -moz-transform: translate3d(0, 0, 0);    -ms-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);   /* Other transform properties here */ }

设置placeholder时候 focus时候文字没有隐藏

 input:focus::-webkit-input-placeholder{     opacity: 0; }

android局部滚动时隐藏原生滚动条

 ::-webkit-scrollbar{     opacity: 0; }

除此之外，还有像HTML5 中的API和重力感应事件等等的新特性的加入，使得HTML5网页的开发变得越发的多功能性，但是这些在今天的布局上局不讲了，以后还会继续讨论下去

布局方法

在手机网页开发中，由于是基于webkit引擎开发的，所以我们可以大量的使用HTML5特性进行开发，布局上为了达到适屏的效果，我们需要进行采用的一般是百分比的布局，但是也是有一些布局较为特殊，这个我们就不讨论了，后续会有一篇讲解布局实例的文章，敬请期待

特别说明如需转载请注明出处，同时如果你觉得赞，请为我点一下“推荐”，你的鼓励是我前进的动力

参考文献

Meta 标签与搜索引擎优化

移动web问题小结

用CSS开启硬件加速来提高网站性能

原文 http://www.cnblogs.com/st-leslie/p/5196852.html

正文到此结束

所属分类：编程技术

本文标签： Document iTunes 下载 ip 网站 API Android 苹果文章 mail cat 微软 HTML 百度 ACE windows 互联网 CSS App 总结 http web 广告 IDE 智能开发 src java tar UI Apple 经验总结 lib logo jquery 实例自适应 scrollTop 搜索引擎代码 Select Developer https 标题 HTML5
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

手机网页布局经验总结

引言

HTML的特殊用法

获取滚动条的滚动值

禁止用户选择文本

浅谈一下box-sizing

box-shadow

base64编码图片代替URL图片

手机拍照和上传图片

移动端特殊的事件

手机图片和视频上传

移动端不同的input对应不同的键盘

动画特效开启加速

android局部滚动时隐藏原生滚动条

用CSS开启硬件加速来提高网站性能

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流