专栏首页互联网杂技手机网页布局经验总结

手机网页布局经验总结

引言

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

阅读读者具备基础

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出现之后,有一些新的事件

  • 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网页的开发变得越发的多功能性,但是这些在今天的布局上局不讲了,以后还会继续讨论下去

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer),作者:json

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-07-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML head 头标签 总结

    HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多...

    前朝楚水
  • 老外的成人玩具又来了,走心的设计,牛X依旧...

    在一些人的观念里认为,设计只是另一种形式的装饰。对于设计师来说,设计是一种心力。因为好的设计都是走心的!它不仅让生活变得更美好,更是让生活变得更便捷。 ? ▲...

    前朝楚水
  • 极简设计的最佳实践

    随着移动设备被越来越多的使用,极简主义的设计思想也伴随着流行开来。事实上,极简主义的应用确实为无论是移动端的应用程序还是传统的网站都带来了额外的好处,比如使用户...

    前朝楚水
  • 响应式布局

    1.查看理想视口(viewport):window.screen.width 2.布局视口:使PC页面在移动端上查看布局不混乱Document.document...

    前端博客 : alili.tech
  • 移动前端头部标签(HTML5 meta)

    在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html>  使用 HTML5 doctype...

    用户1197315
  • 移动webhead参数

    用户7657330
  • 即将是史上最全的meta大全

    本文的目的是搜集当前主流的meta配置,方便开发者快速开发调试。在这里不会做各种meta的深入分析,只是简单的介绍,让大家知道有这个东西。

    Tusi
  • meta 标签知多少

    meta 标签提供该页面的一些信息,比如针对搜索引擎和更新频度的描述和关键词,它还可以控制页面缓冲、响应式窗口等,定义 meta 标签有利于网站 SEO(有利于...

    多云转晴
  • 最全Html标签Meta介绍,全面总结,学HTML这一篇够了

    今天查Html手册时,又有了新的发现。也就这机会,好好总结下HTML中Meta的使用。

    用户5827212
  • 移动web前端meta通用设置

    原文链接:http://www.maoyupeng.com/web-app-common-meta.html

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券