制作手機瀏覽器顯示格式的HTML頁面


最近要推出手機支持訪問的HTML頁面效果,而這在制作手機頁面的過程中狀況連連。 主要一下就我制作的工程中所遇的問題說明一下:

1. 改掉HTML頁面聲明:(以往大部分頁面都是HTML4.0的聲明)  還有很多參數可以配置大家可以google一下

<!DOCTYPE HTML>
<html>
    <head>
        <meta content="width=device-width,user-scalable=no" name="viewport">

 

2. 關於img標簽的問題,可能會有些圖片大小顯示不一

暫時只能用width:100%屬性解決(height最好別寫,不然圖片上下左右拉伸,失真的厲害)。  忘大神告訴更牛逼的辦法

 

3. 關於head頭部LOGO居中顯示的問題

  大家可以參考網易手機新聞制作的頁面

  下面是對head頭部的圖片進行居中顯示的CSS

.tou{display: -webkit-box;-webkit-box-align: center;-webkit-box-pack: center;margin-top: 10px;}
.o{display: -webkit-box;height: 56px;width: 320px;background-size: 320px auto;background-repeat: no-repeat;background-image: url("/image/feihei_head.png");}

HTML標簽

<div class="tou">
    <a href="http://m.nubb.com/app/ihwr_1.1.7.apk" class="o"></a>
</div>

最后出來的效果類似於網易新聞那鏈接里的

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM