Html5如何使我們開發出來的應用或頁面大小能適合各種高端手機使用

文章出處

本文簡介：
1、手機移動端頁面的自適應
2、手機觸摸手動滑動效果

一、header信息的設置（自適應）
　　　1、聲明信息 <!DOCTYPE HTML>
　　　2、編碼設置 <meta charset="UTF-8">
　　　3、移動設備特別設置（重要聲明！）
　　　<meta content="width=device-width,user-scalable=no" name="viewport">

Viewport說明：該設置可使我們開發出的頁面/產品大小可適應各種高端移動設備
width=device-width 為設備的寬度.
user-scalable=no/yes 此功能為用戶調整縮放。默認為yes。一般設置為no
PS:初次嘗試制作移動端頁面。親們，由于我沒有加上面的viewport聲明，結果導致頁面狼狽不堪。

二、手機觸摸手動滑動效果
1、觸摸屏效果滾動組件（js必須包含的部分）

<!--觸摸屏效果滑動組件-->
<script type="text/javascript" src="./js/touch.js"></script>
<script type="text/javascript" src="./js/zepto.extend.js"></script>
<script type="text/javascript" src="./js/zepto.ui.js"></script>
<script type="text/javascript" src="./js/slider.js"></script>
<!--觸摸屏效果滑動組件end-->

本人親測以上4個js必須包含，缺一不可。
2、所要在手機端做滑動效果的部位（html代碼部分）

<div class="head_nav_C" id="hongye_nav" style="height:60px;">
            <div style="background-color:white;">
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div>
            <div style="background-color:white;">
                      bbbbbbbbbbbbbbbbbbbbbbbbbbb
            </div>
            <div style="background-color:white;">
                        cccccccccccccccccccccccccccc
            </div>
            <div style="background-color:white;">
                         ddddddddddddddddddddddddd
            </div>
        </div>

3、js代碼塊（改代碼會在動在要加滑動效果的html代碼塊中自動生成一塊代碼）

<script>
    Zepto(function($){//自動加載zepto組件
        $("#hongye_nav").slider({//為html 對應的id部分最佳slider屬性
            autoPlay    : false, //是否自動
            showDot     : false,
            loop        : true,//是否循環
        });
    })
</script>

4、加載slider.css樣式

附：
另外一種簡單的寫法(適用于幻燈)
html代碼部分
<div id=”fla”>
　　<img lazyload=”images/img2.jpg” />
　　<img lazyload=”images/img3.jpg” />
</div>
2、js代碼部分
<script>
//創建slider組件
$('#fla').slider();
</script>

附：小知識
一、字體效果
color:#FFF 定義字體的顏色
text-shadow:0 0 2px #146F61;(css3.0特效)
CSS3.0的文字陰影 text-shadow
語法：text-shadow: h-shadow v-shadow blur color;
也就是
text-shadow：【x軸（x offset） y軸（Y offst）模糊半徑（Blur）顏色（color）】
例如：text-shadow: 5px 5px 5px #FF0000;

二、盒子模型圓角效果
border-radius 屬性
例子：
div
{
border:2px solid;
border-radius:25px;
}
等價于：
div{
border:2px solid;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}