移動(dòng)端(1)

移動(dòng)端開發(fā)注意事項(xiàng)(1)

PC端頁(yè)面直接在移動(dòng)端瀏覽器查看會(huì)有一些問題茬暇,需要一些設(shè)置來解決
viewport 有默認(rèn)寬度寡喝,并且會(huì)默認(rèn)縮放iphone4默認(rèn)viewport大小980px視口
瀏覽器=》視口=》頁(yè)面
可以設(shè)置寬度 content="width=320"設(shè)置成和設(shè)備一樣的寬度

<meta name="viewport" content="width=320">

由于移動(dòng)端設(shè)備的多樣性预鬓,所以要借助另一個(gè)屬性 width=device-width視口寬度等于設(shè)備寬度不過單純?cè)O(shè)置寬度,頁(yè)面還是會(huì)進(jìn)行縮放格二,所以要設(shè)置縮放比initial-scale 設(shè)置縮放比

<meta name="viewport" content="initial-scale=1.0">

只設(shè)置寬度或者縮放比里的一項(xiàng)并不能達(dá)到100%還原頁(yè)面,所以要兩個(gè)同時(shí)設(shè)置

<meta name="viewport" content="width=device-width,initial-scale=1.0">

有些頁(yè)面可能不需要用戶自行縮放粉臊,防止頁(yè)面變形設(shè)置是否允許用戶縮放user-scalable 0 1 no yes

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scaleable=0">

其他參數(shù)maximum-scale:最大縮放比驶兜,大于0的數(shù)字minimun-scale:最小縮放比,大于0的數(shù)字

實(shí)例說明現(xiàn)在拿移動(dòng)端淘寶為例子远寸,它的meta標(biāo)簽設(shè)置為

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

可以看到淘寶的meta標(biāo)簽?zāi)J(rèn)縮放比設(shè)置為了0.5屠凶,它的頁(yè)面寬度為640,通過縮放進(jìn)行適配矗愧,那為何要這么做?
這里就得說說移動(dòng)端設(shè)備的分辨率問題夜涕,iphone4的像素為320*480
像素又分為物理像素和css像素,這里說的手機(jī)分辨率指的是物理像素属愤,一個(gè)物理像素對(duì)應(yīng)一個(gè)分辨率

這里用iphone4來舉例說明:

  • iphone4的分辨率為640*980
  • iphone4的css像素為 320*480
  • 所以手機(jī)上的一個(gè)css像素點(diǎn)對(duì)應(yīng)了的物理像素為 2*2 那么由此可以得到iphone4上的像素比為:物理像素/css像素=2:1
    iphone6p由于具有更高的分辨率,所以像素比也更高住诸,為3:1那么由此可以看出,在iphone4上丧诺,由于淘寶頁(yè)面將寬度設(shè)置為了640px奄薇,那么要在320px寬度的設(shè)備之上進(jìn)行適配,所以要進(jìn)行縮放馁蒂,initial-scale=0.5進(jìn)行設(shè)置這么做可以提高用戶體驗(yàn),使頁(yè)面更加清晰
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市谁鳍,隨后出現(xiàn)的幾起案子劫瞳,更是在濱河造成了極大的恐慌倘潜,老刑警劉巖志于,帶你破解...
    沈念sama閱讀 216,591評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件伺绽,死亡現(xiàn)場(chǎng)離奇詭異嗜湃,居然都是意外死亡澜掩,警方通過查閱死者的電腦和手機(jī)购披,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門刚陡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來株汉,“玉大人,你說我怎么就攤上這事乔妈。” “怎么了贮懈?”我有些...
    開封第一講書人閱讀 162,823評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵优训,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我揣非,道長(zhǎng),這世上最難降的妖魔是什么忌傻? 我笑而不...
    開封第一講書人閱讀 58,204評(píng)論 1 292
  • 正文 為了忘掉前任搞监,我火速辦了婚禮,結(jié)果婚禮上琐驴,老公的妹妹穿的比我還像新娘。我一直安慰自己宙刘,他們只是感情好牢酵,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著布近,像睡著了一般垫释。 火紅的嫁衣襯著肌膚如雪吊输。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,190評(píng)論 1 299
  • 那天茫船,我揣著相機(jī)與錄音扭屁,去河邊找鬼。 笑死料滥,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的高每。 我是一名探鬼主播践宴,決...
    沈念sama閱讀 40,078評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼带欢!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起乔煞,我...
    開封第一講書人閱讀 38,923評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤柒室,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后剥啤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體不脯,經(jīng)...
    沈念sama閱讀 45,334評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡刻诊,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了复局。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,727評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡峦剔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出吝沫,到底是詐尸還是另有隱情递礼,我是刑警寧澤,帶...
    沈念sama閱讀 35,428評(píng)論 5 343
  • 正文 年R本政府宣布脊髓,位于F島的核電站,受9級(jí)特大地震影響恭朗,放射性物質(zhì)發(fā)生泄漏依疼。R本人自食惡果不足惜痰腮,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評(píng)論 3 326
  • 文/蒙蒙 一诽嘉、第九天 我趴在偏房一處隱蔽的房頂上張望弟翘。 院中可真熱鬧虫腋,春花似錦稀余、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至辟癌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背处面。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工菩掏, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人智绸。 一個(gè)月前我還...
    沈念sama閱讀 47,734評(píng)論 2 368
  • 正文 我出身青樓传于,卻偏偏與公主長(zhǎng)得像囱挑,于是被迫代替她去往敵國(guó)和親沼溜。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 剛開始做移動(dòng)端web開發(fā)的同學(xué)應(yīng)該都碰到過頁(yè)面適配問題通熄,為什么我在開發(fā)手機(jī)上調(diào)試好的頁(yè)面在其他手機(jī)會(huì)有這樣或那樣的...
    留七七閱讀 19,357評(píng)論 5 80
  • 原文地址 在移動(dòng)設(shè)備上進(jìn)行網(wǎng)頁(yè)的重構(gòu)或開發(fā)唇辨,首先得搞明白的就是移動(dòng)設(shè)備上的viewport了能耻,只有明白了viewp...
    matthewm閱讀 1,550評(píng)論 0 4
  • (轉(zhuǎn)自:http://blog.csdn.net/tengdazhang770960436/article/det...
    一個(gè)廢人閱讀 712評(píng)論 0 1
  • 今天是傳說中的神棍節(jié)晓猛,以往我對(duì)這類節(jié)日總有著期待和另類解讀戒职,以至于總讓自己陷入各種情緒栗恩,自從學(xué)習(xí)金剛智慧洪燥,我變得自...
    花開見佛笑閱讀 92評(píng)論 0 0
  • ˇ ˇ黃昏里的路燈 半夢(mèng)半醒地亮著 定是昨晚腳下的戀人說了一晚的情話 花香四溢的院門 嘎吱嘎吱地響 定是晚歸...
    清燁閱讀 200評(píng)論 1 2