當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

移动端h5开发总结不断更新中....

發布時間：2025/5/22 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了移动端h5开发总结不断更新中.... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一.手機端開發頁面必須要加一段代碼：

注：這段代碼的主要意思是：讓頁面寬度等于設備寬度，縮放比例為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.手機拍照和上傳圖片

<input type=file accept="image/*"><input type=file accept="video/*">

2.取消input在ios下，輸入的時候英文首字母的默認大寫

3.打電話和發短信

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">  <meta content="black" name="apple-mobile-web-app-status-bar-style">  <meta content="telephone=no" name="format-detection">  <meta content="email=no" name="format-detection">  <title>title</title> <link rel="stylesheet" href="index.css"> </head>

總結

以上是生活随笔為你收集整理的移动端h5开发总结不断更新中....的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

更新中

上一篇：文件的读取流和书写流
下一篇：使用Django1.11创建简单的资产管