移动端h5开发总结不断更新中....
生活随笔
收集整理的這篇文章主要介紹了
移动端h5开发总结不断更新中....
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一.手機端開發頁面必須要加一段代碼：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />注：這段代碼的主要意思是：讓頁面寬度等于設備寬度，縮放比例為1，禁止用戶縮放。用于檢測視口，主要的效果就是取消下面的滾動條，讓頁面適應屏幕。
二.為自己的頁面設置最大寬度和最小寬度：
{max-width:640px;min-width:320px;}主要作用是在屏幕足夠大的時候，頁面也不會失真。三.兼容手機屏幕大小不同的情況：
window.onload=window.onresize=function(){document.documentElement.style.fontSize = document.documentElement.clientWidth*40/640+'px';};在寫移動端頁面的時候要加上這一段代碼，這段代碼意思是：讓視口或者說頁面的可見寬度與根元素的字符大小產生對應關系，例如上面這段代碼意思是在視口寬度為640px的時候，讓根元素的字符大 小為40px（也就是1rem等于40px），這樣在視口不斷變化的時候，根元素的字符大小也會不斷變化，而且有固定的系數（1/16），這樣就產生了對應關系，也就是兼容了不同屏幕大小不一樣的情況。具體用法：引用上述js代碼，在設計圖640px的情況下測量距離，然后在把距離除以40，并把px為rem，這樣就可以了，注：js里的40和640可以根據需要靈活更改，但要注意字符默認情況下最小為12px且widow.onload在只能出現一次。
四.去掉 a，input 在移動端瀏覽器中的默認樣式
1.禁止 a 標簽背景在移動端使用 a標簽做按鈕的時候，點按會出現一個“暗色”的背景，去掉該背景的方法如下：a,button,input,optgroup,select,textarea {-webkit-tap-highlight-color:rgba(0,0,0,0); }2.禁止長按 a，img 標簽長按出現菜單欄使用 a標簽的時候，移動端長按會出現一個 菜單欄，這個時候禁止呼出菜單欄的方法如下a, img {-webkit-touch-callout: none; }3.流暢滾動body{-webkit-overflow-scrolling:touch;}4.修改webkit表單輸入框placeholder的樣式input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}5.禁止ios和android用戶選中文字.css{-webkit-user-select:none}五. 其他
1.手機拍照和上傳圖片
2.取消input在ios下，輸入的時候英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />3.打電話和發短信
<a href="tel:0755-10086">打電話給:0755-10086</a><a href="sms:10086">發短信給: 10086</a>viewport模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <!--當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari--> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <!--將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式--> <meta content="telephone=no" name="format-detection"> <!-- 禁止將頁面中的數字識別為電話號碼--> <meta content="email=no" name="format-detection"> <!--忽略Android平臺中對郵箱地址的識別--> <title>title</title> <link rel="stylesheet" href="index.css"> </head>總結
以上是生活随笔為你收集整理的移动端h5开发总结不断更新中....的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 文件的读取流和书写流
- 下一篇： 使用Django1.11创建简单的资产管