移动端的小问题整理
1.問題:在iPhone設備上點擊時會出現一個半透明的灰色背景。
解決辦法:
html,body{-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
-webkit-tap-highlight-color 是 css3 的新屬性,這個屬性只用于 IOS(iPhone和iPad)。當你點擊一個鏈接或通過 Javascript 定義的可點擊元素的時候,它就會出現一個半透明的灰色背景。你可以設置 -webkit-tap-highlight-color 為任何顏色,想要禁用這個背景,設置顏色的透明度設置為0。
? 2.禁止ios長按復制粘貼功能
/*設置IOS頁面長按不可復制粘貼,但是IOS上出現input、textarea不能輸入,因此將使用-webkit-user-select:auto;*/*{-webkit-touch-callout:none; /*系統默認菜單被禁用*/-webkit-user-select:none; /*webkit瀏覽器*/-khtml-user-select:none; /*早期瀏覽器*/-moz-user-select:none;/*火狐*/-ms-user-select:none; /*IE10*/user-select:none; } input,textarea {-webkit-user-select:auto; /*webkit瀏覽器*/margin: 0px;padding: 0px;outline: none; }3.如果再touchstart事件中加入了alert()事件則會阻止touchmove和touchend事件。
?4.取消手機端頁面長按圖片出現保存或者圖片被打開的方法
在移動端,長按移動端頁面圖片會出現收藏或保存圖片提醒,還有微信手機端頁面會出現打開圖片的情況,下面說一下如何取消這種情況。可以使用background-image代替img標簽,但是這樣適應性不好。還可以給img標簽添加pointer-events:none屬性來阻止這種彈出框。1.使用 pointer-events:none給 img 標簽加樣式:img{pointer-events:none}親測有效,適用于微信客戶端的手機頁面,圖片被打開的情況2.加全局樣式*{-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
?
?
轉載于:https://www.cnblogs.com/BlingSun/p/9378256.html
總結
- 上一篇: 代码风格与文件模板
- 下一篇: Mybatis之占位符与拼接符