手机网页布局经验总结

时间 2019-11-13

标签手机网页布局经验总结栏目 HTML 繁體版

原文原文链接

引言css

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

阅读读者具有基础html5

一、熟练的使用HTML和CSSjquery

二、对HTML5和CSS3有必定的了解，这个没必要深刻android

三、掌握JavaScript、jquery脚本语言ios

若是还不能具有以上基础的读者们建议大家仍是去网上找一下其余的一些相关的教学贴看一看，要否则可能会跟不上下面的学习了web

HTML的特殊用法windows

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

那么咱们就先从这张图片提及：app

相信这张图片你们必定是不会陌生的，没错这个就是淘宝网的标题栏，其中的红色边框标出来的图标在这里是至关的抢眼，可是你知道这个是怎样制做的吗？

首先咱们要准备一张，淘宝的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网页的开发变得愈加的多功能性，可是这些在今天的布局上局不讲了，之后还会继续讨论下去

布局方法

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

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

参考文献

Meta 标签与搜索引擎优化

移动web问题小结

手机网页布局经验总结

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