怎么動(dòng)手寫手機(jī)網(wǎng)站

怎么動(dòng)手寫手機(jī)網(wǎng)站

最近一直在研究移動(dòng)手機(jī)網(wǎng)站的開(kāi)發(fā)，發(fā)現(xiàn)做手機(jī)網(wǎng)站沒(méi)有想象中的那么難。為什么會(huì)這么說(shuō)呢？我們?cè)囅胂?我們連傳統(tǒng)的PC網(wǎng)站都會(huì)做，難道連一個(gè)小小的手機(jī)網(wǎng)站難道都搞不定嗎？其實(shí)手機(jī)網(wǎng)站就是一個(gè)微縮版的PC網(wǎng)站罷了！

手機(jī)網(wǎng)站基本框架代碼：

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>手機(jī)網(wǎng)站</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script type="text/javascript">
    //根據(jù)屏幕大小及dpi調(diào)整縮放和大小
    (function() {
        var scale = 1.0;
        var ratio = 1;
        if (window.devicePixelRatio >= 2) {
            scale *= 0.5;
            ratio *= 2;
        }
        var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
        document.write(text);
        document.documentElement.style.fontSize = 50 * ratio + "px";
    })();
    </script>
    <!--啟用 WebApp 全屏模式（IOS）-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <!--設(shè)置狀態(tài)欄的背景顏色（IOS）,在web app應(yīng)用下?tīng)顟B(tài)條（屏幕頂部條）的顏色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--添加到主屏后的標(biāo)題（IOS）-->
    <meta name="apple-mobile-web-app-title" content="標(biāo)題">
    <link rel="icon"  type="image/x-icon">
    <!--蘋果移動(dòng)設(shè)備（ipod、ipad、iphone）對(duì)移動(dòng)網(wǎng)站-mobile web進(jìn)行收藏（“添加到桌面圖標(biāo)”）的時(shí)候增加的圖標(biāo)定義屬性-->
    <link rel="apple-touch-icon-precomposed" sizes="57x57" >
    <link rel="apple-touch-icon-precomposed" sizes="120x120" >
    <link rel="apple-touch-icon-precomposed" sizes="196x196" >
    <!--IOS Web app啟動(dòng)動(dòng)畫-->
    <link rel="apple-touch-startup-image"  media="(device-height:568px)">
    <link rel="apple-touch-startup-image"  media="(device-height:480px)">
    <!-- iPhone -->
    <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
    <!-- iPhone (Retina) -->
    <link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (portrait) -->
    <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
    <!-- iPad (landscape) -->
    <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, portrait) -->
    <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, landscape) -->
    <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!--移動(dòng)端手機(jī)號(hào)碼識(shí)別（IOS）-->
    <meta name="format-detection" content="telephone=no">
    <!--移動(dòng)端郵箱識(shí)別（Android）-->
    <meta name="format-detection" content="address=no">
    <!--優(yōu)先使用最新版本 IE 和 Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link href="css/style.css" rel="stylesheet"/>
    <style>
        body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}
        .viewport{ max-width:640px; min-width:300px; margin:0 auto;}
    </style>
    </head> 
    <body>
        <div>
            大家好！這是手機(jī)網(wǎng)頁(yè)！
        </div>
    </body>
</html>

至于為什么覺(jué)得難、覺(jué)得無(wú)從下手。有以下幾點(diǎn)：

一、沒(méi)有完整的思路和流程

就像做網(wǎng)站的流程一樣，如果你能知道它的流程，我相信就不會(huì)覺(jué)得做手機(jī)網(wǎng)站難！真正難的是你沒(méi)有思路。

二、把html5這門技術(shù)想的高深莫測(cè)

好像覺(jué)得學(xué)會(huì)用html5+css3做手機(jī)網(wǎng)站，就相當(dāng)于學(xué)會(huì)了頂尖的絕世武功。其實(shí)你錯(cuò)了！不要把html5這玩意想的太高深，其實(shí)做手機(jī)網(wǎng)站，真正意義上用不到什么的html5的強(qiáng)大功能。(可能對(duì)于一些不懂什么技術(shù)的小白而言：你的手機(jī)網(wǎng)站是用HTML5+CSS3做的啊，簡(jiǎn)直牛逼呀！能用上目前互聯(lián)網(wǎng)上最新最前沿的技術(shù)。其實(shí)明眼人一看，就知道是用什么技術(shù)做的。俗話說(shuō)的好："外行看熱鬧，內(nèi)行看門道")
下面就說(shuō)說(shuō)怎么來(lái)開(kāi)發(fā)移動(dòng)手機(jī)網(wǎng)站吧！
基本上開(kāi)發(fā)手機(jī)網(wǎng)站，可大致分為兩大類。一類是用框架開(kāi)發(fā)手機(jī)網(wǎng)站。一類是自己手寫手機(jī)網(wǎng)站。

一、框架開(kāi)發(fā)手機(jī)網(wǎng)站

一般用現(xiàn)在常用的開(kāi)發(fā)框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..當(dāng)然可能還有一些移動(dòng)端開(kāi)發(fā)的框架，rachet.js
為什么說(shuō)BootStrap是目前前端最火熱的開(kāi)發(fā)框架呢？
因?yàn)閎ootstrap自帶響應(yīng)式布局（柵格系統(tǒng)），而且能做到移動(dòng)設(shè)備優(yōu)先的原則。

運(yùn)用bootstrap來(lái)開(kāi)發(fā)網(wǎng)站有什么好處呢？

1.不懂設(shè)計(jì)也可以做網(wǎng)站

就算不懂設(shè)計(jì)，你的網(wǎng)頁(yè)在Bootstrap的幫助下，也能擁有超高顏值。它強(qiáng)大的內(nèi)置樣式庫(kù)讓你的作品變成尤物。
主要體現(xiàn)在：字體文件和bootstrap自帶的UI樣式。（為廣大不會(huì)UI設(shè)計(jì)的程序員，提供了福音）

2.上手快

你可以專心解決問(wèn)題，冗繁的細(xì)節(jié)都丟給Bootstrap操心?？梢宰龅揭淮伍_(kāi)發(fā)，就可適配所有終端，并且能迅速上手并建出網(wǎng)站原型。還提供很多豐富的插件，就算你不會(huì)JS，基本能看懂常見(jiàn)的API，網(wǎng)站上的效果，基本能解決。

缺點(diǎn)：

1.不遵循最佳實(shí)踐

我們?cè)谑褂肂ootstrap時(shí)遇到的最大問(wèn)題之一是你的DOM元素上將擁擠大量的類。這打破了良好的web設(shè)計(jì)基本規(guī)則之一，HTML不再有語(yǔ)義，而且內(nèi)容和表示不再分離。前端純粹主義者會(huì)覺(jué)得這相當(dāng)令人討厭，以為它使可擴(kuò)展性、重用性和維護(hù)性遇到了更大的挑戰(zhàn)。

2. Bootstrap 太重

直接點(diǎn)說(shuō)：就是CSS和JS有點(diǎn)點(diǎn)大。CSS壓縮后115k,JS壓縮后35k
如果你想要使用Bootstrap的所有功能，你應(yīng)該好好考慮資源的加載時(shí)間。當(dāng)然，對(duì)于一些地方這可能不是問(wèn)題，但是在新西蘭互聯(lián)網(wǎng)不得不橫跨太平洋，這時(shí)數(shù)據(jù)達(dá)到那兒將是很緩慢的。因此考慮你的目標(biāo)市場(chǎng)。
相信任何框架都有它的優(yōu)點(diǎn)，同時(shí)也是有它的缺點(diǎn)的。沒(méi)有一個(gè)產(chǎn)品是很完美的，所以根據(jù)自身實(shí)際情況進(jìn)行選擇。至于一些其它框架暫時(shí)不做過(guò)多的解釋了，相信只要你肯愿意百度一下，就可以找到你想要的答案。

二、手寫手機(jī)網(wǎng)站

一般我們自己手動(dòng)開(kāi)發(fā)手機(jī)網(wǎng)站的話，基本可以劃分兩類來(lái)做到。一類是通過(guò)在網(wǎng)頁(yè)頭部添加meta標(biāo)簽進(jìn)行實(shí)現(xiàn)（網(wǎng)頁(yè)指html5的格式來(lái)開(kāi)發(fā)）。另一類是通過(guò)CSS3的Media標(biāo)簽（媒介查詢）來(lái)實(shí)現(xiàn)。不了解媒介查詢的朋友，可以看看這篇文章：響應(yīng)式布局。
在這里我們?cè)敿?xì)講解下,利用添加meta標(biāo)簽來(lái)做手機(jī)網(wǎng)站。
基本在網(wǎng)頁(yè)頭部我們只需添加四個(gè)meta標(biāo)簽就可以實(shí)現(xiàn)一個(gè)手機(jī)網(wǎng)站的框架。我一起來(lái)看看是哪些meta標(biāo)簽。

1、添加viewport標(biāo)簽

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

詳細(xì)屬性：

  • width ---- viewport的寬度（width=device-width意思是：寬度等于設(shè)備寬度）
  • height ------ viewport的高度（height=device-height意思是：高度等于設(shè)備寬度）
  • initial-scale ----- 初始的縮放比例
  • minimum-scale ----- 允許用戶縮放到的最小比例
  • maximum-scale ----- 允許用戶縮放到的最大比例
  • user-scalable ----- 用戶是否可以手動(dòng)縮放

2、禁止將數(shù)字變?yōu)殡娫捥?hào)碼

<meta name="format-detection" content="telephone=no" />

一般情況下，IOS和Android系統(tǒng)都會(huì)默認(rèn)某長(zhǎng)度內(nèi)的數(shù)字為電話號(hào)碼，即使不加也是會(huì)默認(rèn)顯示為電話的，so，取消這個(gè)很有必要！

3、iphone設(shè)備中的safari私有meta標(biāo)簽

<meta name="apple-mobile-web-app-capable" content="yes" />

它表示：允許全屏模式瀏覽，隱藏瀏覽器導(dǎo)航欄

4、iphone的私有標(biāo)簽

<meta name="apple-mobile-web-app-status-bar-style" content="black">

它指定的iphone中safari頂端的狀態(tài)條的樣式
默認(rèn)值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）
另外還有一個(gè)個(gè)性化的link標(biāo)簽，它支持用戶將網(wǎng)頁(yè)創(chuàng)建快捷方式到桌面時(shí)，其圖標(biāo)變?yōu)槲覀冏约憾x的圖標(biāo)。比如手機(jī)騰訊網(wǎng)上的標(biāo)簽：

<link rel="apple-touch-icon-precomposed" >

不過(guò)騰訊對(duì)這個(gè)png圖標(biāo)的命名并不規(guī)范，常規(guī)我們要求文件名應(yīng)為 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS會(huì)為這個(gè)圖標(biāo)自動(dòng)添加圓角、陰影和高亮覆蓋層，后者則不會(huì)添加這些效果。

蘋果圖標(biāo)apple-touch-icon-precomposed和apple-touch-icon兩種設(shè)置的區(qū)別探究

蘋果safari瀏覽器當(dāng)中apple-touch-icon-precomposed 和 apple-touch-icon屬性是有區(qū)別的
圖標(biāo)設(shè)置的屬性分為：
apple-touch-icon 和 apple-touch-icon-precomposed兩種屬性，從字面意思上可以看出，第一個(gè)是 “蘋果移動(dòng)設(shè)備圖標(biāo)”，第二個(gè)為“蘋果移動(dòng)設(shè)備初始圖標(biāo)樣式”
使用apple-touch-icon屬性的明顯比使用apple-touch-icon-precomposed圖標(biāo)多出一個(gè)高光，因?yàn)樵趇os系統(tǒng)中對(duì)icon有一套規(guī)范，就是在ios設(shè)備的圖標(biāo)統(tǒng)一為“四邊圓角”、“高光處理”，至于“圖標(biāo)陰影”，是ios設(shè)備中統(tǒng)一為所有桌面元素增加的，所以不作為圖標(biāo)單獨(dú)處理的樣式，由于在視覺(jué)上統(tǒng)一最重要的是形狀的統(tǒng)一，所以“圓角”是必須的，但是對(duì)于“高光”蘋果沒(méi)有做出特別的強(qiáng)調(diào)，所以蘋果設(shè)置當(dāng)中把“高光”作為可選項(xiàng)，就產(chǎn)生了apple-touch-icon 和 apple-touch-icon-precomposed屬性。
結(jié)論：
使用apple-touch-icon屬性為“增加高光光亮的圖標(biāo)”；
使用apple-touch-icon-precomposed屬性為“設(shè)計(jì)原圖圖標(biāo)”；

apple-touch-startup-image啟動(dòng)畫面

橫屏和豎屏：
<link rel="apple-touch-startup-image" media="screen and (orientation: portrait)" href="milanoo_startup.png" />
<link rel="apple-touch-startup-image" media="screen and (orientation: landscape)" href="milanoo_startup1.png" />

HTML/CSS 移動(dòng)端

關(guān)閉iOS鍵盤首字母自動(dòng)大寫

在iOS中，默認(rèn)情況下鍵盤是開(kāi)啟首字母大寫的功能的，如果啟用這個(gè)功能，可以這樣：

<input type="text" autocapitalize="off" />
關(guān)閉iOS輸入自動(dòng)修正

和英文輸入默認(rèn)自動(dòng)首字母大寫那樣，IOS還做了一個(gè)功能，默認(rèn)輸入法會(huì)開(kāi)啟自動(dòng)修正輸入內(nèi)容，這樣的話，用戶經(jīng)常要操作兩次。如果不希望開(kāi)啟此功能，我們可以通過(guò)input標(biāo)簽屬性來(lái)關(guān)閉掉：

<input type="text" autocorrect="off" />
禁止文本縮放

當(dāng)移動(dòng)設(shè)備橫豎屏切換時(shí)，文本的大小會(huì)重新計(jì)算，進(jìn)行相應(yīng)的縮放，當(dāng)我們不需要這種情況時(shí)，可以選擇禁止：

html {
　　-webkit-text-size-adjust: 100%;
}

需要注意的是，PC端的該屬性已經(jīng)被移除，該屬性在移動(dòng)端要生效，必須設(shè)置 `meta viewport'。

移動(dòng)端如何清除輸入框內(nèi)陰影

在iOS上，輸入框默認(rèn)有內(nèi)部陰影，但無(wú)法使用 box-shadow 來(lái)清除，如果不需要陰影，可以這樣關(guān)閉：

input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

快速回彈滾動(dòng)

我們先來(lái)看看回彈滾動(dòng)在手機(jī)瀏覽器發(fā)展的歷史：

  • 早期的時(shí)候，移動(dòng)端的瀏覽器都不支持非body元素的滾動(dòng)條，所以一般都借助 iScroll;
  • Android 3.0/iOS解決了非body元素的滾動(dòng)問(wèn)題，但滾動(dòng)條不可見(jiàn)，同時(shí)iOS上只能通過(guò)2個(gè)手指進(jìn)行滾動(dòng)；
  • Android 4.0解決了滾動(dòng)條不可見(jiàn)及增加了快速回彈滾動(dòng)效果，不過(guò)隨后這個(gè)特性又被移除；
  • iOS從5.0開(kāi)始解決了滾動(dòng)條不可見(jiàn)及增加了快速回彈滾動(dòng)效果

在iOS上如果你想讓一個(gè)元素?fù)碛邢?Native 的滾動(dòng)效果，你可以這樣做：

.xxx {
    overflow: auto; /* auto | scroll */
    -webkit-overflow-scrolling: touch;
}

PS：iScroll用過(guò)之后感覺(jué)不是很好，有一些詭異的bug，這里推薦另外一個(gè) iDangero Swiper，這個(gè)插件集成了滑屏滾動(dòng)的強(qiáng)大功能（支持3D），而且還有回彈滾動(dòng)的內(nèi)置滾動(dòng)條，官方地址：
http://www.idangero.us/sliders/swiper/index.php

移動(dòng)端禁止選中內(nèi)容

如果你不想用戶可以選中頁(yè)面中的內(nèi)容，那么你可以在css中禁掉：

.user-select-none {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移動(dòng)端不需要） */
  -ms-user-select: none;      /* IE 10+ */      
}

移動(dòng)端取消touch高亮效果

在做移動(dòng)端頁(yè)面時(shí)，會(huì)發(fā)現(xiàn)所有a標(biāo)簽在觸發(fā)點(diǎn)擊時(shí)或者所有設(shè)置了偽類 :active 的元素，默認(rèn)都會(huì)在激活狀態(tài)時(shí)，顯示高亮框，如果不想要這個(gè)高亮，那么你可以通過(guò)css以下方法來(lái)進(jìn)行全局的禁止：

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

但這個(gè)方法在三星的機(jī)子上無(wú)效，有一種妥協(xié)的方法是把頁(yè)面非真實(shí)跳轉(zhuǎn)鏈接的a標(biāo)簽換成其它標(biāo)簽，可以解決這個(gè)問(wèn)題。

如何禁止保存或拷貝圖像（IOS）

通常當(dāng)你在手機(jī)或者pad上長(zhǎng)按圖像 img ，會(huì)彈出選項(xiàng) 存儲(chǔ)圖像 或者 拷貝圖像，如果你不想讓用戶這么操作，那么你可以通過(guò)以下方法來(lái)禁止：

img { -webkit-touch-callout: none; }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,022評(píng)論 4贊 61
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一種新的協(xié)議。它實(shí)...
    香橙柚子閱讀 24,694評(píng)論 8贊 183
  • 我不知道什么是感情，怎樣的感覺(jué)算感情，但是我不想以失去你為代價(jià)去體會(huì)這種感覺(jué)。情感是我所追求又不敢觸碰的，正如刺...
    小超哥在此閱讀 221評(píng)論 0贊 2
  • 每一天其實(shí)都很特別！ 今天是我女兒兩歲的第一天。這句話怎么也沒(méi)有說(shuō)“昨天是我女兒的生日”這句更讓人記得住。其實(shí)，女...
    厲冰凌閱讀 2,114評(píng)論 0贊 3
  • 昨天說(shuō)的籃球，今天說(shuō)說(shuō)足球。剛看完曼市德比- - 真正算喜歡足球應(yīng)該是在高中，可能是籃球太爛了需要找個(gè)出口。所以就...
    S的隨便用賬號(hào)閱讀 584評(píng)論 0贊 50

友情鏈接更多精彩內(nèi)容