移動端項目的注意點

BlackHole1 發布于2019-08-30 14:24 / 1257人閱讀

摘要：移動端點擊按鈕時有陰影添加如下類即可去掉移動端無效添加可以解決移動端長按選中文本添加如下代碼可以解決移動端禁止縮放移動端滾動流暢但是這一行代碼有很多，使用時要謹慎。

移動端點擊按鈕時有陰影

添加如下類即可去掉：

-webkit-tap-highlight-color: rgba(0,0,0,0);

移動端 :active 無效

添加 ontouchstart 可以解決：

移動端長按選中文本

添加如下代碼可以解決：

* {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

移動端禁止縮放

移動端滾動流暢

-webkit-overflow-scrolling:touch;

但是這一行代碼有很多 bug ，使用時要謹慎。
個人比較推薦：better-scroll

CSS3 做 0.5px 的細線

個人推薦 weui 的實現方式：

.weui-cell:before{
   content: " ";
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   height: 1px;
   border-top: 1px solid #D9D9D9;
   color: #D9D9D9;
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
}

其它實現 0.5px 細線方式

文本大小根據設備尺寸進行調整

auto: 會 | none: 不會

text-size-adjust: none;

GPU云服務器云服務器注意點兼容支持webrtc的移動端購買云計算服務器需要注意點移動端對webRTC的支持情況

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115997.html

HTML5移動端音樂播放器（啟蒙篇）

摘要：前些天偷臺風的閑暇時寫了一個移動端音樂播放器，作為練手項目。有的歌詞周杰倫算什么男人格式是時間點時間歌詞創建映射首先以將歌詞字符串分割成以時間點文字的數組，但由于這樣分割之后最后一個元素是空的，所以用刪除最后一個元素。這段時間公司一直在做一個PC的教育類單頁應用，龐大復雜，涉及非常多H5的知識，音頻就是其中的一部分。前些天偷臺風的閑暇時寫了一個移動端音樂播放器，作為練手項目。在線地...

Lin_R 2019-08-20 11:58 評論0 收藏0
移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
再談移動端適配和點5像素的由來

摘要：再談移動端適配百分比解決方案的缺點在我們的項目中大量的使用百分比來解決頁面在寬度上的自適應，其實在高度上并沒有很好的自適應。前言這篇文章的內容如題目一樣，主要分為兩個部分，談談業內主流的移動端適配解決方案點5像素的由來和實現方法建議在讀這篇文章的時候先讀下這篇文章《高清屏概念解析與檢測設備像素比的方法_20161005》，因為這些文章涉及的很多概念在這篇文章中都會提到。 ...

lordharrd 2019-08-20 11:31 評論0 收藏0