手机网页布局经验总结_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

手机网页布局经验总结_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:26 AM

引言

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

阅读读者具备基础

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

See all articles