移動端web開發的小筆記

2021-07-14 18:03:07 字數 1964 閱讀 6409

移動端的開發跟pc端的開發還是稍有區別的,以下內容是個人移動開發的經驗,後期會不定時更新錯誤以及新的內容

一、從meta標籤說起

首先,在移動端,我們希望將頁面視窗自動調整到裝置寬度,需要的meta標籤是這樣

name="viewport"

content="width=device-width, initial-scale=1"/>

為什麼會有這個需求呢 ?為什麼需要將頁面視窗自動調整到裝置寬度呢?

這涉及到了移動裝置(ios, android)的螢幕尺寸問題,device-width指的是裝置的物理寬度,width是頁面寬度,這麼做是為了相容更多的裝置。

接下來,很多時候,我們不希望頁面能夠雙擊放大,該如何呢?

name="viewport"

content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0;">

這樣,我們就規定了頁面不可以雙擊放大了

很多情況下移動裝置會自動識別一些數字為**號碼,這有時候並不是我們想要的,

name="format-detection"

content="telephone=no" />

加入這個meta標籤會讓全篇的數字都不自動識別為**號碼,但是,如果我希望有些數字還是能被識別為**號碼又該怎麼做呢 ?

href="tel:000-000-0000">000-000-0000a>
這樣,加入乙個a標籤,給它乙個tel屬性寫入**號碼作為屬性值就好啦

二、移動端的長度單位

在移動端如果還像在pc端一樣使用px作為長度單位,因為涉及到畫素密度的問題,在很多時候都需要大量的響應式**查詢,如果專案比較大的話,這是乙個工作量很大的任務,但是如果使用rem,相對於根元素的相對單位,就會為你的**減少很多任務作量

一般情況下我是這麼做的

html

@media screen and (min

-width:321px) and (max

-width:375px)}

@media screen and (min

-width:376px) and (max

-width:414px)}

@media screen and (min

-width:415px) and (max

-width:639px)}

@media screen and (min

-width:640px)}

當然還會有其他的寫法,比如font-size的基值設為100px,其他的螢幕大小的font-size值相應的為上面**的10倍,在上面的**中,我在頁面中需要配置設定螢幕的最大寬度為640px,這樣才能更有可能使頁面布局更加符合我的設計。

三、移動端的背景設定

在移動端你仍然可以給乙個元素用設定背景,為了使其按照寬度百分百顯示,你只需要指定background-size為100%即可。

像下面這樣

還有些時候我們想給背景做一些漸變,在pc端,因為考慮到瀏覽器相容性,為了相容之前的瀏覽器大多數時候的漸變需要採用來實現,但是在移動端,你可以考慮css3的新特效,像下面這樣,

.bg

四、移動端的垂直居中

在pc端想要垂直居中,你可能想到使用父級table定位,子級table-cell來實現垂直居中,如果指定元素的寬高,還可以使用absolute定位,top50%, margin-top負高的一般來實現垂直居中,再或者,你可以在js中計算然後再實現垂直居中,但是在移動端,近來發現了乙個新的屬性來實現垂直居中,就是用transform的translate來實現

.test

關於移動端開發,還有很多小tips,持續更新

移動端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...

移動端web開發

互動優化 1px dpr dpr dp viewport使手機瀏覽器先排版正確再縮放 移動web最佳設定 viewport content width device width,initial scale 1,user scalable no 相容性問題根據html的font size,基值設dev...