高清屏下正確顯示1px寬度的圓角邊框
直接設置border:1px solid #ccc;在手機下看會比設計稿粗（這裏由於是灰色可能不是那麼明顯。。。。。用紅色綠色藍色之類的粗細差異很大），瀏覽器邊框的最小的顯示像素是1px,設置0.5px也是會渲染成1px的效果，而在css的1px根據手機的品牌或型號不同在高清屏的物理像素是2像素或者3像素 div class="list-wrapper border-1px
昵称 jiang_rong
@移動端web
贡献者17
粉丝0
贡献者
@移動端web
动态 列表
Vue完美記住滾動條和實現下拉加載
滾動條 常見於移動端 App 在滾動點擊進入的時候 問題描述 當我們在開發 web app 的時候，經常會遇到一個問題，就是當從一個可滾動的列表頁進入到下一個詳情頁面，然後返回列表頁面的時候，很難去還原滾動條的狀態，無法記住進來時候的位置。 以前我嘗試過很多方法： 有 vue-router 自帶的 scrollBehavior，需要記住 scrollTop，然後還原，但是管理這個 scroll
昵称 hezhongfeng
完整版移動端滑動事件封裝
touchEvent 基於Jquery擴展在移動端產生的事件，包含，單次觸摸事件，兩次觸摸事件，長按事件，滑屏事件，向上滑動事件，向下滑動事件，向左滑動事件，向右滑動事件 預覽 地址預覽 https://hangjob.github.io/touchEvent/index.html 事件類型 單次觸摸事件 $(el).tap tap: function(element, fn) {
昵称 羊先生
移動端click事件300ms延時解決方案
問題描述 移動端由於屏幕雙擊會縮放頁面，因此移動端click事件會有300ms延時情況的產生 解決方案 方法一：全局禁止縮放 在html頁面頭部的meta標籤中加上content="user-scalable=no" meta content="user-scalable=no" 該方法會讓瀏覽器禁用默認的雙擊行為並且去掉300ms點擊延時 適用場景：需要對整個頁面進行禁用雙擊行為。但
昵称 chen
【Flutter 2-9】Flutter手把手教程UI佈局和Widget——彈性佈局控件Flexible
作者 | 弗拉德 來源 | 弗拉德（公眾號：fulade_me) Flexible Flexible可以幫助Row、Column、Flex的子控件充滿父控件，它的用法很靈活，也具有權重的屬性。跟Flexible相類似的控件還有Expanded。 先來看Flexible的構造函數 const Flexible({ /// key Key key, // 默認 fl
昵称 弗拉德
【Flutter 2-10】Flutter手把手教程UI佈局和Widget——流式佈局Wrap
作者 | 弗拉德 來源 | 弗拉德（公眾號：fulade_me) Wrap 在Flutter中Wrap是流式佈局控件，Row和Column在佈局上是很好用，但是有一個缺點，如果當子控件數量過多導致Row或Column裝載不下的時候，就會出現UI頁面上的錯誤。Wrap可以完美的避免這個問題，當控件過多一行顯示不全的時候，Wrap可以換行顯示。 當然Wrap跟Row和Column有着很多相似的地
昵称 弗拉德
【Flutter 2-11】Flutter手把手教程UI佈局和Widget——列表ListView
作者 | 弗拉德 來源 | 弗拉德（公眾號：fulade_me) ListView ListView是在移動端非常常見的控件，在大多數的展示場景中都離不開ListView。在Flutter中對ListView的封裝也非常好，簡單幾行代碼就可以滿足我們佈局一個滾動列表的需求。 先來看一下構造函數： ListView({ /// key Key key, /// 佈局方向
昵称 弗拉德
使用Flexible & swiper進行移動Web開發
移動端適配方案flexible.js 出發點 事故的開始總是有原因的，那思考一下，為什麼使用Flexible? [ ] 為了rem佈局？ 為什麼要rem佈局 —— 高度還原 [ ] 移動端適配? 為什麼移動端適配要用Flexible —— 同等佔比 [ ] 什麼是移動端適配？ 最初點是設計圖的高度還原！！！ 以750*1334設計稿(iPhone6)為準，期望每一個設計元件在iPho
昵称 米花兒團兒
前端面試寶典：移動端核心知識篇
前言： 想系統學習前端面試題，強烈推薦瀏覽 在線電子書（支持手機版，不斷更新） 。 本書特點：系統全面（涵蓋前端核心技術點），簡潔，針對性強（針對面試場景設計）。 歡迎在github上留言反饋 移動端 移動端高清屏適配方案？ 幾個要解決的重要問題： 佈局 字體大小 1px邊框 高清圖 參考資料： 移動端高清屏適配方案 移動端尺寸單位？ px: 絕對長度單位， rem：相對長度單位，相對
昵称 tuihou123321
優酷質量保障系列(二）—客户端自動化測試基礎能力建設
文娛妹導讀 自動化測試能力建設過程中，自動化框架選型、框架設計核心和思路、自動化能力平台接入，是自動化測試能力建設過程中重要環節。文章分享優酷APP自動化測試能力建設過程中的經驗 本系列文章將陸續發佈，感興趣的朋友持續關注！ 前言 隨着移動端版本迭代的加快，快速測試，快速反饋已經是一個常態化的流程，週期內版本發佈頻率的增加，各項測試的時間正在急劇縮短，且迴歸性的任務不斷充斥當中，
昵称 阿里巴巴文娛技術
關於移動端
視口 總共可分為3個視口：佈局視口，視覺視口，理想視口 佈局視口： 1. 一般移動設備的瀏覽器都默認設置一個佈局視口，用於解決早起的PC端頁面在手機上顯示的問題 2. 這個視口的分辨率基本都設置為980px 視覺視口： 用户所看到的網站區域 理想視口： 使得網站在移動端有最理想的瀏覽和閲讀寬度而設定的，是最理想的視口尺寸 要手動添加meta視口標籤，主要目的：佈局視口的寬度應該與理想視口的寬
昵称 Tap? taq
Vue適配PC+大屏，手機+ipad適配
PC+大屏適配 可適配 1400px以上的屏幕 查看演示 項目地址 設置設計稿-轉換rem 我們的設計稿是3840px寬度，所以widthOfDesignLayout設置3840 module.exports = { plugins: { autoprefixer: {}, "@njleonzhang/postcss-px-to-rem": {
昵称 羊先生
支付寶小程序開發上拉加載實現
寫這篇文章起源於我們的產品經理提的一個需求，我們是做一個課程購買的小程序。每個課程下面有n節課。當點課的時候跳轉到課程學習頁面，並且查詢當前課在設定分頁數和分頁大小（默認7）所在的列表，以及它的位置。 如圖： 每節課對應一個序號。默認展示7條數據。當用户上拉的時候加載前面7條數據（即第一頁），下拉加載後面一個分頁7條數據。 那麼加載後面一個分頁數據我們可以通過小程序onReac
昵称 陽哥
viewport深入理解和使用
什麼是viewport ? viewport是用户網頁的可視區域，也可叫做視區。手機瀏覽器是把頁面放在一個虛擬的窗口(viewport)中，通常這個虛擬的窗口比屏幕寬，這樣就不用把網頁擠到很小的窗口中，用户可以通過平移和縮放來看網頁的不同部分。 下圖為常見一些設備瀏覽器默認viewport寬度： css中的1px不等於設備的1px 在css中經常使用px做單位，PC端瀏覽器中的1px往往都
昵称 前端知識搬運工
嘗試檢測移動端click延時
據説移動端click有個延時300ms響應的機制，目的是為了區分單擊、雙擊。如果300ms內再次點擊，則判定為雙擊，移動端的雙擊用於縮放頁面；否則為單擊，執行click的事件處理函數。 取消click延時響應的3種做法： 設置視口標籤，禁用縮放頁面功能，瀏覽器也會相應取消對雙擊的響應。 利用touch系列事件包裝一組監聽器，只有touch持續時間小於某個值才歸為點擊（大於就是長按或者拖
昵称 BENCJL
7 款最棒的 React 移動端 UI 組件庫 - 特別針對國內使用場景推薦
本文完整版：《7 款最棒的 React 移動端 UI 組件庫 - 特別針對國內使用場景推薦》 優秀的 React UI 移動端組件庫和模版框架，幫我們節省開發時間，提高開發效率，統一設計語言。更棒的是內置的功能複雜，我們自己很難處理的常用組件，比如表格、表單、富文本編輯器、時間日期選擇器、實時拖拽組件等，再進一步，還有幫我們把組件的輪子裝好的 React admin 後台管理系統。本文推薦 7 款
融雲移動辦公協同平台，助力政企數智化轉型升級
隨着社會經濟的快速發展和科學技術的全面進步，政企數字化轉型已跑步進入加速期。2022 年上半年國內多地疫情突發、頻發，進一步推動了政企數字化轉型從前端用户觸達向後端業務流程變革的深入，加速了業務流程和運營管理的線上線下一體化進程。而隨着 5G、雲計算等新一代信息技術的不斷變革，移動數字化已成為政企數字化轉型的劃時代新命題。關注【融雲 RongCloud】，瞭解協同辦公平台更多幹貨。 從溝
昵称 融雲RongCloud
性能優化進階：讓你的移動端網頁1s呈現
前言 現在的消費者越來越依賴移動設備來訪問內容和服務，這比以往任何時候都要求更高。當他們權衡您網站上的體驗時，他們不僅將您與您的競爭對手進行比較，還會在使用完後對您的應用進行評級。 但是很多網站給用户帶來的體驗並不太好，以致造成潛在客户流失，所以，性能是留住用户的關鍵。 Pinterest 將感知等待時間減少了 40%，這將搜索引擎流量和註冊量增加了 15% 。 原文(國外)：htt
昵称 wxp686
移動終端和自助終端的區別
在現代火車站中，旅客取票的方式主要分為兩種：移動終端和自助終端。這兩種方式各具特點，適應不同的場景和需求。 移動終端 移動終端通常指的是可以隨身攜帶的設備，如智能手機或平板電腦。火車站使用移動終端允許旅客通過移動應用或網站進行操作，如購票、查詢信息和電子取票等。 特點： 便捷性：旅客可以在任何地點，只要有網絡連接，就能完成操作，無需到特定地點排隊等候。 個性化服務：應用程序能夠根據旅客的歷史
昵称 註銷
flutter系列之:移動端手勢的具體使用
簡介 之前我們介紹了GestureDetector的定義和其提供的一些基本的方法，GestureDetector的好處就是可以把任何一個widget都賦予類似button的功能。 今天將會通過幾個具體的例子來講解一下GestureDetector的具體使用。 賦予widget可以點擊的功能 一般情況下，我們的普通widget，比如文本是不能進行交互的，但是如果將其用GestureDetector進
昵称 flydean
什麼是移動應用的證書指紋
移動應用的證書指紋是在SSL/TLS（安全套接層/傳輸層安全）協議下用於驗證數字證書有效性的一種方式。在移動應用開發中，證書指紋用於確保應用與服務器之間的通信是安全且受信任的。它是一個加密哈希值，用於標識數字證書的公鑰。通過比較應用中存儲的證書指紋與服務器返回的證書指紋，開發者可以驗證服務器的身份，從而減少中間人攻擊和惡意劫持的風險。 為了更好地理解證書指紋的概念，讓我們通過一個詳細的例子來説明：
昵称 註銷