最近要推出手機支持訪問的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>
最后出來的效果類似於網易新聞那鏈接里的