移動端Web開發注意點

2021-09-06 22:49:45 字數 2124 閱讀 9263

移動端開發主要物件是手持裝置,其中絕大部分是ios和android系統,so,在開發此類頁面時不必糾結ie和其他一些2b瀏覽器的相容性,webkit是本次開發重點。

當然,不同版本的android是存在一些問題的,還有就是不同瀏覽器的版本也存在一些差別,ios在這方面表現甚好。

所以在開發時我們只需使用chrome進行除錯即可,話說chrome的開發者工具也是灰常不錯的。

控制顯示區域各種屬性:

<

meta

content

="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

name

="viewport"

>

ios中safari允許全屏瀏覽:

<

meta

content

="yes"

name

>

ios中safari頂端狀態條樣式:

<

meta

content

="black"

name

>

忽略將數字變為**號碼:

<

meta

content

="telephone=no"

name

="format-detection"

>

<

meta

content

="telephone=no"

name

="format-detection"

>

content="telephone=no" name="format-detection">

一般情況下,ios和android系統都會預設某長度內的數字為**號碼,即使不加也是會預設顯示為**的,so,取消這個很有必要!

ios中safari設定儲存到桌面圖示:

這是ios中safari特有的meta,是在你儲存某個頁面到桌面的時候使用這張圖作為桌面圖示,so,尺寸和iphone上的一致,是57*57px

<

link

relhref

="custom_icon.png"

>

box-flex的作用是按百分比劃分兄弟相同標籤的width,也就是當ul裡有個兩個li時,每個li會自動劃分ul的寬度,如果box-flex:1;那麼此時,li的width就是50%

box-flex第一種用法例項:

<

ul>

<

li>11111

li>

<

li>2222222

li>

<

li>333333333

li>

ul>

ulul li

顯示結果(需用webkit核瀏覽器檢視,如chrome,下同):

box-flex第二種用法例項:

<

div

class

="demo02"

>

<

input

placeholder

="百分百寬度輸入框"

type

="text"

>

div>

<

style

type

="text/css"

>

.demo02

.demo02 input

style

>

從萬惡的群主那邊坑點文章,堅決不做low貨!

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

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

移動端web開發

viewport content width device width,user scalable no,initial scale 1.0,maximum scale 1.0,minimum scale 1.0 width 設定視口寬度 initial scale 初始化縮放比,大於0的數字 ma...

移動端Web開發

移動端web開發與pc端的web開發有尺寸上的不同,手機螢幕大小有很多種,因此尺寸方面有些要注意的。1.字型 採用js動態設定字型大小的方法 思路如下 螢幕寬度 640px,則font size 100px 螢幕寬度 640px,則font size 100 寬度 640px 字型單位為rem 在b...