背景在公司參與一個原生app和h5混合開發的項目，本人在項目中負責h5部分，現將項目中遇到的問題總結如下：
具體問題
問題1：頁面滾動條問題
問題描述
web頁面在pc瀏覽器上瀏覽時有滾動條；但是，在移動端瀏覽器打開時，沒有滾動條解決方法
將頁面的最外層(我一般在寫頁面時，會在body標簽內寫一個大容器，用于存放頁面的內容)設置overflow:auto/scroll;并且不能設置height屬性的值(height:100%也不行)
例子
問題2：touchstart 和 touchend 事件的使用問題描述引入touch.js文件，使用touchstart和touchend事件實現交互效果時，在部分手機出現事件觸發失效的問題[例如：低版本的榮耀手機]解決方法方法1：removeeventlistener和addeventlistener一起使用方法2：添加e.preventdefault(); 阻止部分手機默認跳轉法3：jquery的on實現事件綁定說明：法1與法2都是原生js使用addeventlistener實現事件監聽；并且dom元素使用touchstart和touchend事件時，需要結合事件綁定或者事件監聽一起使用，否則js部分會拋出異常代碼問題3：長按閃退的問題情景還原有一個xxx列表頁，長按列表頁的列表項時(觸摸到文字)，在低版本手機中會出現閃退的情況解決方法js部分：在事件觸發時添加e.preventdefault();，用于阻止默認行為css部分：添加禁止文本文本復制的代碼代碼問題4: 移動端1px的問題問題描述由于不同的手機有不同的像素密度,css中的1px并不等于移動設備的1px。項目中使用js和rem做移動端的屏幕適配，所以產生0.5px的情況，導致低版本的手機展示不了0.5px的邊框。解決方法使用css解決1px的問題，并且給需要設置成1px的dom元素直接寫上：border-width:1px;代碼//html部分： <div class='class1'></div> //css部分： .class1{ border: 1px solid #ccc; } //css部分 /*移動端正常展示1px的問題 start*/ %border-1px{ display: block; position:absolute; left: 0; width: 100%; content: ' '; } .border-1px{ position: relative; &::after{ @extend %border-1px; bottom: 0; border-top: 1px solid #ccc; } &::before{ @extend %border-1px; top: 0; border-bottom: 1px solid #ccc; } } @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){ .border-1px{ &::after{ -webkit-transform: scaley(0.7); transform: scaley(0.7); } } } @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){ .border-1px{ &::after{ -webkit-transform: scaley(0.5); transform: scaley(0.5); } } } /*移動端正常展示1px的問題 end*/

網絡營銷推廣做友鏈的方法有哪些
關鍵詞優化的策略
如何用合作的態度來提升網站收錄與排名？
SAS和SATA存儲技術區別
網站搭建初期 企業建站策劃該寫什么內容？
網站優化如何避免操作過度？
做好SEO需要文章質量不需要數量
網絡seo推廣內鏈優化有哪些技巧?