移動端開發注意之一二

2022-04-22 03:51:19 字數 997 閱讀 6827

review自己的原型時發現幾個問題,分享之

從而我們可以給文字、圖示、按鈕等可操作元素擴充套件觸控區域,padding、line-height等都是不錯的方式。

想要成為乙個優秀的前端,必須充分了解設計師的意圖,在真的有問題時其實我們可以找設計師喝杯咖啡啥的,一般設計師都是美女哦,當然我們只是為了更好的使用者體驗

不過如果設計師給的區域就不夠大,我們針對很小的icon可以如此擴充套件

<

div

class

="icon"

><

span

>圖示

span

>

div>

<

div

class

="icon"

>::before

div>

紅線框出的話筒,現版本已被隱藏掉,需要自己調出來,它就利用了transform:scale,之前的文章我也有講過transform:scale和zoom的區別

2、上面說到事件繫結到div上,由此我也想到乙個問題,

很多小夥伴喜歡把事件繫結在如上圖子元素上,如果熟讀過高程的會知道事件委託,利用事件冒泡來繫結事件的效能遠優於分別繫結於子元素,這個我就不贅述了,畢竟移動端對效能的要求還是很高的,網路和硬體沒有pc那麼好呀

在此給大家推薦一篇移動端前端效能優化文章

3、最後給個針對三星蓋世3 fixed的bug小tip

在我們給元素position:fixed 設定width:100%時,變成橫屏時蓋3的寬度還是豎屏的寬度,如何解決

①利用**查詢在橫屏時重新賦一下樣式

@media all and (orientation:landscape) }
②在fixed元素裡面再套一層設定position:absolute,width依然100%就可以解決

移動端(iOS)SDK開發注意點

sdk開發相關的知識網上沒有太細緻的總結,下面根據自己的經驗總結一下 sdk開發怎麼做到更專業?不管內部 多麼混亂 沒有層次 不專業,但是提交給他人的sdk 標頭檔案 庫 要保證足夠的專業性,簡單來說就是一句話 這一句話包含的資訊量甚多,最大前提就是沒有bug我就不說了 盡量做到吧 下面根據過程詳細...

移動端Web開發注意點

移動端開發主要物件是手持裝置,其中絕大部分是ios和android系統,so,在開發此類頁面時不必糾結ie和其他一些2b瀏覽器的相容性,webkit是本次開發重點。當然,不同版本的android是存在一些問題的,還有就是不同瀏覽器的版本也存在一些差別,ios在這方面表現甚好。所以在開發時我們只需使用...

移動端開發的注意事項

1 把viewport設定成裝置的實際畫素 在標籤中加入 a.移動端單獨使用一套資源時 直接對css進行編寫,在瀏覽器進行除錯的時候切換至手機螢幕進行顯示。b.pc端與移動端使用同一套資源時 在css中寫入 media max width 500px 這樣在螢幕小於500px的時候,使用的都是上面所...