手机网页布局经验总结

引言

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

阅读读者具备基础

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开启硬件加速来提高网站性能

时间： 2024-10-27 04:25:06

手机网页布局经验总结的相关文章

网页布局经验分享

今天博主想给大家分享的是,在实际网页制作中,我们通常会遇到到一些问题,以及如何去着手做一整个网页布局. 首先,我们在接到制作网页的要求和主要素材以及对方想要的网页效果后(前期准备工作),我们更多的要考虑的是一个页面的整体效果以及这个整体里面所包含的小版块是否合理,是否被主流浏览器所兼容.我这里说的主流浏览器主要是指IE.firefox.谷歌等一些我们日常使用率较高的浏览器. 在我看来,首先我们并不需要拿着素材及要求以后提手就码代码,毕竟有经验的码农都知道,先把具体的操作思路有个大致的思维导图以后

移动端网页设计经验与心得

原文:移动端网页设计经验与心得 智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上. 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝.黑.白,界面单调,并且要尽可能的设计简单. 现在情况就大不相同了,软件上webkit内核浏览器大行其道,硬件突飞猛进,网速来说,4g正炒得火热. 下面就和大家分享一下我的一些移动端网页设计经验与心得. ⒈ 分辨率这应该是移动端网页最关心的问题了,因为移动设备五花八门,各种分辨率都有.要想在这些设备上都能

移动端布局经验

移动布局经验 移动前端开发正逐渐步入前端技术的主流,事实上跟在一般的pc上,并不需要你掌握额外的技术,然而你在pc web上那一套在多数情况下并不适用于手机web,你必须知道这其中的注意点.当然移动web给人的感觉是一个拼h5和css3的阵地,这里面有足够高大上的技术等着你去驾驭,在这方面,你可以欣喜地说:让ie见鬼去吧. 1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 1    2    3    4    5    6 代

移动端网页设计经验与心得(转)

智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上. 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝.黑.白,界面单调,并且要尽可能的设计简单. 现在情况就大不相同了,软件上webkit内核浏览器大行其道,硬件突飞猛进,网速来说,4g正炒得火热. 下面就和大家分享一下我的一些移动端网页设计经验与心得. ⒈ 分辨率这应该是移动端网页最关心的问题了,因为移动设备五花八门,各种分辨率都有.要想在这些设备上都能有良好的浏览体验,得花一番功夫.

14.1 “1-2-1”变宽度网页布局

在上一章中,对固定宽度的页面布局傲了比较深入地分析和讲解.在本章中,将对变宽度的页面布局做进一步的分析.变宽度的布局要比固定宽度的布局复杂一些,根本的原因在于,宽度不确定,导致很多参数无法确定.因此．必须使用一些技巧来完成. 这里将介绍一些国外的CSS领域著名的设计师的研究成果,并对变宽度网页布局的总体情况进行归纳.希望读者能够保持清晰的思路,这样在实际工作中遇到具体的案例时,就可以灵活地选择解决方法.lodidance.com “1-1-1”布局过于简单,因此这里就不再介绍了.我们从“1-2-

网页布局之---固定布局、流动布局、弹性布局(转)

原文地址 有一个问题已经困扰网页设计师们很久了:该使用固定.流动.弹性,还是混合布局呢?它们各有优缺点.最终的决定取决于网站的可用性,单用某一种布局就想达到目的,可能没那么容易.那么,既然如此令人困惑,是否有做出正确决定的诀窍呢?考虑好几个问题,恰当地设定目标结果,你也能做出融合各方优点的成功布局设计. 为什么要争论这些?网页设计受可用性的大棒指引,而由于网站用户的多样性,已经很难做出对不同用户都有足够可用性的网站. 当设计的网站会面向众多用户时,设计师必须考虑访客之间的下列潜在差异: 屏幕分辨

jquery.mobile手机网页简要

先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应用程序开发框架推荐 最终选择的是 jQuery Mobile ,官方地址:http://jquerymobile.com jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架.能工作在现有主流的智能手机和平板电脑上,且构建于 jQuery 以及 jQuery UI类库之上,用极少的

移动端网页布局中需要注意事项以及解决方法总结

移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉<meta name="msapplication-tap-highlight" content="no">1.关闭iOS键盘首字母自动大写<input type="text" autocapitalize="off" />2.禁止文本缩放h

Div+CSS网页布局中CSS无效的十个常见原因

学习Div+CSS网页布局的知识,可是兄弟连validation有时难以操作,但用它你可以查看由版面设计引起的差错,验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能,下面十个细微的失效问题难住了大批程序员,本文就告诉你如何解决,在本文开始前介绍一些使用兄弟连PHP培训的基础div+css验证程序时需要注意的问题. 1.不要担心验证程序的警告:如果验证程序说发现12处错误以及83处警告,不要理它,继续进行下一步. 2.一次更正一个错误:按顺序进展工作,从上