viewport銆佸竷灞€瑙嗗彛銆佽瑙夎鍙ｃ€佺悊鎯宠鍙?娣卞叆鐞嗚В
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了viewport銆佸竷灞€瑙嗗彛銆佽瑙夎鍙ｃ€佺悊鎯宠鍙?娣卞叆鐞嗚В相关的知识，希望对你有一定的参考价值。
鏍囩锛?a href='http://www.mamicode.com/so/1/%e4%b8%8d%e8%83%bd' title='涓嶈兘'>涓嶈兘 灏哄 閫氳繃 閫傞厤 pix 瑙ｅ喅 鐗规畩 ext 杈撳嚭
鍦ㄧЩ鍔ㄨ澶囦笂杩涜缃戦〉鐨勯噸鏋勬垨寮€鍙戯紝棣栧厛寰楁悶鏄庣櫧鐨勫氨鏄Щ鍔ㄨ澶囦笂鐨剉iewport浜嗭紝鍙湁鏄庣櫧浜唙iewport鐨勬蹇典互鍙婂紕娓呮浜嗚窡viewport鏈夊叧鐨刴eta鏍囩鐨勪娇鐢紝鎵嶈兘鏇村ソ鍦拌鎴戜滑鐨勭綉椤甸€傞厤鎴栧搷搴斿悇绉嶄笉鍚屽垎杈ㄧ巼鐨勭Щ鍔ㄨ澶囥€?/p>
2. css涓殑1px骞朵笉绛変簬璁惧鐨?px
鍦╟ss涓垜浠竴鑸娇鐢╬x浣滀负鍗曚綅锛屽湪妗岄潰娴忚鍣ㄤ腑css鐨?涓儚绱犲線寰€閮芥槸瀵瑰簲鐫€鐢佃剳灞忓箷鐨?涓墿鐞嗗儚绱狅紝杩欏彲鑳戒細閫犳垚鎴戜滑鐨勪竴涓敊瑙夛紝閭ｅ氨鏄痗ss涓殑鍍忕礌灏辨槸璁惧鐨勭墿鐞嗗儚绱犮€備絾瀹為檯鎯呭喌鍗村苟闈炲姝わ紝css涓殑鍍忕礌鍙槸涓€涓娊璞＄殑鍗曚綅锛屽湪涓嶅悓鐨勮澶囨垨涓嶅悓鐨勭幆澧冧腑锛宑ss涓殑1px鎵€浠ｈ〃鐨勮澶囩墿鐞嗗儚绱犳槸涓嶅悓鐨勩€傚湪涓烘闈㈡祻瑙堝櫒璁捐鐨勭綉椤典腑锛屾垜浠棤闇€瀵硅繖涓触娲ヨ杈冿紝浣嗗湪绉诲姩璁惧涓婏紝蹇呴』寮勬槑鐧借繖鐐广€傚湪鏃╁厛鐨勭Щ鍔ㄨ澶囦腑锛屽睆骞曞儚绱犲瘑搴﹂兘姣旇緝浣庯紝濡俰phone3锛屽畠鐨勫垎杈ㄧ巼涓?20x480锛屽湪iphone3涓婏紝涓€涓猚ss鍍忕礌纭疄鏄瓑浜庝竴涓睆骞曠墿鐞嗗儚绱犵殑銆傚悗鏉ラ殢鐫€鎶€鏈殑鍙戝睍锛岀Щ鍔ㄨ澶囩殑灞忓箷鍍忕礌瀵嗗害瓒婃潵瓒婇珮锛屼粠iphone4寮€濮嬶紝鑻规灉鍏徃渚挎帹鍑轰簡鎵€璋撶殑Retina灞忥紝鍒嗚鲸鐜囨彁楂樹簡涓€鍊嶏紝鍙樻垚640x960锛屼絾灞忓箷灏哄鍗存病鍙樺寲锛岃繖灏辨剰鍛崇潃鍚屾牱澶у皬鐨勫睆骞曚笂锛屽儚绱犲嵈澶氫簡涓€鍊嶏紝杩欐椂锛屼竴涓猚ss鍍忕礌鏄瓑浜庝袱涓墿鐞嗗儚绱犵殑銆傚叾浠栧搧鐗岀殑绉诲姩璁惧涔熸槸杩欎釜閬撶悊銆備緥濡傚畨鍗撹澶囨牴鎹睆骞曞儚绱犲瘑搴﹀彲鍒嗕负ldpi銆乵dpi銆乭dpi銆亁hdpi绛変笉鍚岀殑绛夌骇锛屽垎杈ㄧ巼涔熸槸浜旇姳鍏棬锛屽畨鍗撹澶囦笂鐨勪竴涓猚ss鍍忕礌鐩稿綋浜庡灏戜釜灞忓箷鐗╃悊鍍忕礌锛屼篃鍥犺澶囩殑涓嶅悓鑰屼笉鍚岋紝娌℃湁涓€涓畾璁恒€?/p>
杩樻湁涓€涓洜绱犱篃浼氬紩璧穋ss涓璸x鐨勫彉鍖栵紝閭ｅ氨鏄敤鎴风缉鏀俱€備緥濡傦紝褰撶敤鎴锋妸椤甸潰鏀惧ぇ涓€鍊嶏紝閭ｄ箞css涓?px鎵€浠ｈ〃鐨勭墿鐞嗗儚绱犱篃浼氬鍔犱竴鍊嶏紱鍙嶄箣鎶婇〉闈㈢缉灏忎竴鍊嶏紝css涓?px鎵€浠ｈ〃鐨勭墿鐞嗗儚绱犱篃浼氬噺灏戜竴鍊嶃€傚叧浜庤繖鐐癸紝鍦ㄦ枃绔犲悗闈㈢殑閮ㄥ垎杩樹細璁插埌銆?/p>
鍦ㄧЩ鍔ㄧ娴忚鍣ㄤ腑浠ュ強鏌愪簺妗岄潰娴忚鍣ㄤ腑锛寃indow瀵硅薄鏈変竴涓?strong>devicePixelRatio(璁惧鍍忕礌姣?灞炴€э紝瀹冪殑瀹樻柟鐨勫畾涔変负锛氳澶囩墿鐞嗗儚绱犲拰璁惧鐙珛鍍忕礌鐨勬瘮渚嬶紝涔熷氨鏄?dpr = dp/ dips銆?br> dp(device pixels)锛?/strong>璁惧鐗╃悊鍍忕礌锛?br> dips(device-independent pixels)锛?/strong>璁惧鐙珛鍍忕礌锛宒ips = css鍍忕礌/scale锛堢缉鏀炬瘮渚嬶級锛屾墍浠pr=(dp/css鍍忕礌)*scale
css涓殑px灏卞彲浠ョ湅鍋氭槸璁惧鐨勭嫭绔嬪儚绱狅紝鎵€浠ラ€氳繃devicePixelRatio锛屾垜浠彲浠ョ煡閬撹璁惧涓婁竴涓猚ss鍍忕礌浠ｈ〃澶氬皯涓墿鐞嗗儚绱犮€備緥濡傦紝鍦≧etina灞忕殑iphone涓婏紝devicePixelRatio鐨勫€间负2锛屼篃灏辨槸璇?涓猚ss鍍忕礌鐩稿綋浜?涓墿鐞嗗儚绱犮€備絾鏄娉ㄦ剰鐨勬槸锛宒evicePixelRatio鍦ㄤ笉鍚岀殑娴忚鍣ㄤ腑杩樺瓨鍦ㄤ簺璁哥殑鍏煎鎬ч棶棰橈紝鎵€浠ユ垜浠幇鍦ㄨ繕骞朵笉鑳藉畬鍏ㄤ俊璧栬繖涓笢瑗匡紝鍏蜂綋鐨勬儏鍐靛彲浠ョ湅涓?a href="http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html">杩欑瘒鏂囩珷銆?br>
devicePixelRatio鐨勬祴璇曠粨鏋滐細
ppk澶х瀵逛簬绉诲姩璁惧涓婄殑viewport鏈夌潃闈炲父澶氱殑鐮旂┒锛?a href="http://www.quirksmode.org/mobile/viewports.html">绗竴绡?/a>锛?a href="http://www.quirksmode.org/mobile/viewports2.html">绗簩绡?/a>锛?a href="http://www.quirksmode.org/mobile/metaviewport/">绗笁绡?/a>锛夛紝鏈夊叴瓒ｇ殑鍚屽鍙互鍘荤湅涓€涓嬶紝鏈枃涓湁寰堝鏁版嵁鍜岃鐐逛篃鏄嚭鑷偅閲屻€俻pk璁や负锛岀Щ鍔ㄨ澶囦笂鏈変笁涓獀iewport銆?/p>
棣栧厛锛岀Щ鍔ㄨ澶囦笂鐨勬祻瑙堝櫒璁や负鑷繁蹇呴』鑳借鎵€鏈夌殑缃戠珯閮芥甯告樉绀猴紝鍗充娇鏄偅浜涗笉鏄负绉诲姩璁惧璁捐鐨勭綉绔欍€備絾濡傛灉浠ユ祻瑙堝櫒鐨勫彲瑙嗗尯鍩熶綔涓簐iewport鐨勮瘽锛屽洜涓虹Щ鍔ㄨ澶囩殑灞忓箷閮戒笉鏄緢瀹斤紝鎵€浠ラ偅浜涗负妗岄潰娴忚鍣ㄨ璁＄殑缃戠珯鏀惧埌绉诲姩璁惧涓婃樉绀烘椂锛屽繀鐒朵細鍥犱负绉诲姩璁惧鐨剉iewport澶獎锛岃€屾尋浣滀竴鍥紝鐢氳嚦甯冨眬浠€涔堢殑閮戒細涔辨帀銆備篃璁告湁浜轰細闂紝鐜板湪涓嶆槸鏈夊緢澶氭墜鏈哄垎杈ㄧ巼閮介潪甯稿ぇ鍚楋紝姣斿768x1024锛屾垨鑰?080x1920杩欐牱锛岄偅杩欐牱鐨勬墜鏈虹敤鏉ユ樉绀轰负妗岄潰娴忚鍣ㄨ璁＄殑缃戠珯鏄病闂鐨勫惂锛熷墠闈㈡垜浠凡缁忚浜嗭紝css涓殑1px骞朵笉鏄唬琛ㄥ睆骞曚笂鐨?px锛屼綘鍒嗚鲸鐜囪秺澶э紝css涓?px浠ｈ〃鐨勭墿鐞嗗儚绱犲氨浼氳秺澶氾紝devicePixelRatio鐨勫€间篃瓒婂ぇ锛岃繖寰堝ソ鐞嗚В锛屽洜涓轰綘鍒嗚鲸鐜囧澶т簡锛屼絾灞忓箷灏哄骞舵病鏈夊彉澶у灏戯紝蹇呴』璁ヽss涓殑1px浠ｈ〃鏇村鐨勭墿鐞嗗儚绱狅紝鎵嶈兘璁?px鐨勪笢瑗垮湪灞忓箷涓婄殑澶у皬涓庨偅浜涗綆鍒嗚鲸鐜囩殑璁惧宸笉澶氾紝涓嶇劧灏变細鍥犱负澶皬鑰岀湅涓嶆竻銆傛墍浠ュ湪1080x1920杩欐牱鐨勮澶囦笂锛屽湪榛樿鎯呭喌涓嬶紝涔熻浣犲彧瑕佹妸涓€涓猟iv鐨勫搴﹁涓?00澶歱x锛堣devicePixelRatio鐨勫€艰€屽畾锛夛紝灏辨槸婊″睆鐨勫搴︿簡銆傚洖鍒版棰樹笂鏉ワ紝濡傛灉鎶婄Щ鍔ㄨ澶囦笂娴忚鍣ㄧ殑鍙鍖哄煙璁句负viewport鐨勮瘽锛屾煇浜涚綉绔欏氨浼氬洜涓簐iewport澶獎鑰屾樉绀洪敊涔憋紝鎵€浠ヨ繖浜涙祻瑙堝櫒灏卞喅瀹氶粯璁ゆ儏鍐典笅鎶妚iewport璁句负涓€涓緝瀹界殑鍊硷紝姣斿980px锛岃繖鏍风殑璇濆嵆浣挎槸閭ｄ簺涓烘闈㈣璁＄殑缃戠珯涔熻兘鍦ㄧЩ鍔ㄦ祻瑙堝櫒涓婃甯告樉绀轰簡銆俻pk鎶婅繖涓祻瑙堝櫒榛樿鐨剉iewport鍙仛layout viewport(甯冨眬瑙嗗彛)銆傝繖涓猯ayout viewport鐨勫搴﹀彲浠ラ€氳繃 document.documentElement.clientWidth 鏉ヨ幏鍙栥€?/p>
鐒惰€岋紝layout viewport 鐨勫搴︽槸澶т簬娴忚鍣ㄥ彲瑙嗗尯鍩熺殑瀹藉害鐨勶紝鎵€浠ユ垜浠繕闇€瑕佷竴涓獀iewport鏉ヤ唬琛?娴忚鍣ㄥ彲瑙嗗尯鍩熺殑澶у皬锛宲pk鎶婅繖涓獀iewport鍙仛 visual viewport(瑙嗚瑙嗗彛)銆倂isual viewport鐨勫搴﹀彲浠ラ€氳繃window.innerWidth 鏉ヨ幏鍙栵紝浣嗗湪Android 2, Oprea mini 鍜?UC 8涓棤娉曟纭幏鍙栥€?br>
ps: visual viewport鐨勫搴︽寚鐨勬槸娴忚鍣ㄥ彲瑙嗗尯鍩熺殑瀹藉害銆?/strong> ideal viewport 骞舵病鏈変竴涓浐瀹氱殑灏哄锛屼笉鍚岀殑璁惧鎷ユ湁鏈変笉鍚岀殑 ideal viewport銆傛墍鏈夌殑 iphone 鐨?ideal viewport 瀹藉害閮芥槸 320px锛屾棤璁哄畠鐨勫睆骞曞搴︽槸 320 杩樻槸 640锛屼篃灏辨槸璇达紝鍦?iphone 涓紝css 涓殑 320px 灏变唬琛?iphone 灞忓箷鐨勫搴︺€?br>
ppk鎶婄Щ鍔ㄨ澶囦笂鐨剉iewport鍒嗕负layout viewport 銆?visual viewport 鍜?ideal viewport 涓夌被锛屽叾涓殑 ideal viewport 鏄渶閫傚悎绉诲姩璁惧鐨剉iewport锛宨deal viewport鐨勫搴︾瓑浜庣Щ鍔ㄨ澶囩殑灞忓箷瀹藉害锛屽彧瑕佸湪css涓妸鏌愪竴鍏冪礌鐨勫搴﹁涓篿deal viewport鐨勫搴?鍗曚綅鐢╬x)锛岄偅涔堣繖涓厓绱犵殑瀹藉害灏辨槸璁惧灞忓箷鐨勫搴︿簡锛屼篃灏辨槸瀹藉害涓?00%鐨勬晥鏋溿€俰deal viewport 鐨勬剰涔夊湪浜庯紝鏃犺鍦ㄤ綍绉嶅垎杈ㄧ巼鐨勫睆骞曚笅锛岄偅浜涢拡瀵筰deal viewport 鑰岃璁＄殑缃戠珯锛屼笉闇€瑕佺敤鎴锋墜鍔ㄧ缉鏀撅紝涔熶笉闇€瑕佸嚭鐜版í鍚戞粴鍔ㄦ潯锛岄兘鍙互瀹岀編鐨勫憟鐜扮粰鐢ㄦ埛銆?/p>
涓変釜瑙嗗彛鎬荤粨濡備笅锛?/strong> 1銆?/strong>鍦ㄦ闈㈡祻瑙堝櫒涓婏紝娴忚鍣ㄧ獥鍙ｄ笌瑙嗗彛鐨勫搴︿竴鑷达紝鑰岃鍙ｏ紙CSS鏍囧噯鏂囨。涓О涓衡€滃垵濮嬪寘鍚潡鈥濓級鏄疌SS鐧惧垎姣斿搴︽帹绠楃殑鏍规簮锛屽洜姝わ紝娴忚鍣ㄧ獥鍙ｆ槸绾︽潫CSS甯冨眬鐨勮鍙ｏ紱 绉诲姩璁惧榛樿鐨剉iewport鏄痩ayout viewport锛屼篃灏辨槸閭ｄ釜姣斿睆骞曡瀹界殑viewport锛屼絾鍦ㄨ繘琛岀Щ鍔ㄨ澶囩綉绔欑殑寮€鍙戞椂锛屾垜浠渶瑕佺殑鏄痠deal viewport銆傞偅涔堟€庝箞鎵嶈兘寰楀埌ideal viewport鍛紵杩欏氨璇ヨ疆鍒癿eta鏍囩鍑哄満浜嗐€?/p>
鎴戜滑鍦ㄥ紑鍙戠Щ鍔ㄨ澶囩殑缃戠珯鏃讹紝鏈€甯歌鐨勭殑涓€涓姩浣滃氨鏄妸涓嬮潰杩欎釜涓滆タ澶嶅埗鍒版垜浠殑head鏍囩涓細 璇eta鏍囩鐨勪綔鐢ㄦ槸璁╁綋鍓峷iewport鐨勫搴︾瓑浜庤澶囩殑瀹藉害锛屽悓鏃朵笉鍏佽鐢ㄦ埛鎵嬪姩缂╂斁銆備篃璁稿厑涓嶅厑璁哥敤鎴风缉鏀句笉鍚岀殑缃戠珯鏈変笉鍚岀殑瑕佹眰锛屼絾璁﹙iewport鐨勫搴︾瓑浜庤澶囩殑瀹藉害锛岃繖涓簲璇ユ槸澶у閮芥兂瑕佺殑鏁堟灉锛屽鏋滀綘涓嶈繖鏍风殑璁惧畾鐨勮瘽锛岄偅灏变細浣跨敤閭ｄ釜姣斿睆骞曞鐨勯粯璁iewport锛屼篃灏辨槸璇翠細鍑虹幇妯悜婊氬姩鏉°€?/p>
杩欎釜name涓簐iewport鐨刴eta鏍囩鍒板簳鏈夊摢浜涗笢瑗垮憿锛屽張閮芥湁浠€涔堜綔鐢ㄥ憿锛?/p>
meta viewport 鏍囩棣栧厛鏄敱鑻规灉鍏徃鍦ㄥ叾safari娴忚鍣ㄤ腑寮曞叆鐨勶紝鐩殑灏辨槸瑙ｅ喅绉诲姩璁惧鐨剉iewport闂銆傚悗鏉ュ畨鍗撲互鍙婂悇澶ф祻瑙堝櫒鍘傚晢涔熼兘绾风悍鏁堜豢锛屽紩鍏ュmeta viewport鐨勬敮鎸侊紝浜嬪疄涔熻瘉鏄庤繖涓笢瑗胯繕鏄潪甯告湁鐢ㄧ殑銆?/p>
鍦ㄨ嫻鏋滅殑瑙勮寖涓紝meta viewport 鏈?涓睘鎬?鏆備笖鎶奵ontent涓殑閭ｄ簺涓滆タ绉颁负涓€涓釜灞炴€у拰鍊?锛屽涓嬶細 姝ゅ锛屽湪瀹夊崜涓繕鏀寔 target-densitydpi 杩欎釜绉佹湁灞炴€э紝瀹冭〃绀虹洰鏍囪澶囩殑瀵嗗害绛夌骇锛屼綔鐢ㄦ槸鍐冲畾css涓殑1px浠ｈ〃澶氬皯鐗╃悊鍍忕礌 杩欐牱鐨勫啓娉曠湅璧锋潵璋侀兘浼氬仛锛屾病鍚冭繃鐚倝锛岃皝杩樻病瑙佽繃鐚窇鍟妦锛岀‘瀹烇紝鎴戜滑鍦ㄥ紑鍙戠Щ鍔ㄨ澶囦笂鐨勭綉椤垫椂锛屼笉绠′綘鏄庝笉鏄庣櫧浠€涔堟槸viewport锛屽彲鑳戒綘鍙渶瑕佽繖涔堜竴鍙ヤ唬鐮佸氨澶熶簡銆?/p>
鍙槸浣犺偗瀹氫笉鐭ラ亾 杩欏彞浠ｇ爜涔熻兘杈惧埌鍜屽墠涓€鍙ヤ唬鐮佷竴鏍风殑鏁堟灉锛屼篃鍙互鎶婂綋鍓嶇殑鐨剉iewport鍙樹负 ideal viewport銆?/p>
鍛靛懙锛屽偦鐪间簡鍚э紝鍥犱负浠庣悊璁轰笂鏉ヨ锛岃繖鍙ヤ唬鐮佺殑浣滅敤鍙槸涓嶅褰撳墠鐨勯〉闈㈣繘琛岀缉鏀撅紝涔熷氨鏄〉闈㈡湰璇ユ槸澶氬ぇ灏辨槸澶氬ぇ銆傞偅涓轰粈涔堜細鏈?width=device-width 鐨勬晥鏋滃憿锛?/p>
瑕佹兂娓呮杩欎欢浜嬫儏锛岄鍏堜綘寰楀紕鏄庣櫧杩欎釜缂╂斁鏄浉瀵逛簬浠€涔堟潵缂╂斁鐨勶紝鍥犱负杩欓噷鐨勭缉鏀惧€兼槸1锛屼篃灏辨槸娌＄缉鏀撅紝浣嗗嵈杈惧埌浜?ideal viewport 鐨勬晥鏋滐紝鎵€浠ワ紝閭ｇ瓟妗堝氨鍙湁涓€涓簡锛岀缉鏀炬槸鐩稿浜?ideal viewport鏉ヨ繘琛岀缉鏀剧殑锛屽綋瀵筰deal viewport杩涜100%鐨勭缉鏀撅紝涔熷氨鏄缉鏀惧€间负1鐨勬椂鍊欙紝涓嶅氨寰楀埌浜?ideal viewport鍚楋紵浜嬪疄璇佹槑锛岀殑纭槸杩欐牱鐨勩€備笅鍥炬槸鍚勫ぇ绉诲姩绔殑娴忚鍣ㄥ綋璁剧疆浜?meta name="viewport" content="initial-scale=1"> 鍚庢槸鍚﹁兘鎶婂綋鍓嶇殑viewport瀹藉害鍙樻垚 ideal viewport 鐨勫搴︾殑娴嬭瘯缁撴灉銆?br>
浣嗗鏋?width 鍜?initial-scale=1 鍚屾椂鍑虹幇锛屽苟涓旇繕鍑虹幇浜嗗啿绐佸憿锛?/strong>姣斿锛?/p>
width=400琛ㄧず鎶婂綋鍓峷iewport鐨勫搴﹁涓?00px锛宨nitial-scale=1鍒欒〃绀烘妸褰撳墠viewport鐨勫搴﹁涓篿deal viewport鐨勫搴︼紝閭ｄ箞娴忚鍣ㄥ埌搴曡鏈嶄粠鍝釜鍛戒护鍛紵鏄功鍐欓『搴忓湪鍚庨潰鐨勯偅涓悧锛熶笉鏄€?strong>褰撻亣鍒拌繖绉嶆儏鍐垫椂锛屾祻瑙堝櫒浼氬彇瀹冧滑涓や釜涓緝澶х殑閭ｄ釜鍊笺€?/strong>渚嬪锛屽綋width=400锛宨deal viewport鐨勫搴︿负320鏃讹紝鍙栫殑鏄?00锛涘綋width=400锛?ideal viewport鐨勫搴︿负480鏃讹紝鍙栫殑鏄痠deal viewport鐨勫搴︺€傦紙ps:鍦╱c9娴忚鍣ㄤ腑锛屽綋initial-scale=1鏃讹紝鏃犺width灞炴€х殑鍊间负澶氬皯锛屾鏃秜iewport鐨勫搴︽案杩滈兘鏄痠deal viewport鐨勫搴︼級 鏈€鍚庯紝鎬荤粨涓€涓嬶紝瑕佹妸褰撳墠鐨剉iewport瀹藉害璁句负ideal viewport鐨勫搴︼紝鏃㈠彲浠ヨ缃?width=device-width锛屼篃鍙互璁剧疆 initial-scale=1锛屼絾杩欎袱鑰呭悇鏈変竴涓皬缂洪櫡锛屽氨鏄痠phone銆乮pad浠ュ強IE 浼氭í绔栧睆涓嶅垎锛岄€氶€氫互绔栧睆鐨刬deal viewport瀹藉害涓哄噯銆傛墍浠ワ紝鏈€瀹岀編鐨勫啓娉曞簲璇ユ槸锛屼袱鑰呴兘鍐欎笂鍘伙紝杩欐牱灏?initial-scale=1 瑙ｅ喅浜?iphone銆乮pad鐨勬瘺鐥咃紝width=device-width鍒欒В鍐充簡IE鐨勬瘺鐥咃細 棣栧厛鎴戜滑鍏堟潵璁ㄨ涓€涓嬬缉鏀剧殑闂锛屽墠闈㈠凡缁忔彁鍒拌繃锛岀缉鏀炬槸鐩稿浜巌deal viewport鏉ョ缉鏀剧殑锛岀缉鏀惧€艰秺澶э紝褰撳墠viewport鐨勫搴﹀氨浼氳秺灏忥紝鍙嶄箣浜︾劧銆備緥濡傚湪iphone涓紝ideal viewport鐨勫搴︽槸320px锛屽鏋滄垜浠缃?initial-scale=2 锛屾鏃秜iewport鐨勫搴︿細鍙樹负鍙湁160px浜嗭紝杩欎篃濂界悊瑙ｏ紝鏀惧ぇ浜嗕竴鍊嶅槢锛屽氨鏄師鏉?px鐨勪笢瑗垮彉鎴?px浜嗭紝浣嗘槸1px鍙樹负2px骞朵笉鏄妸鍘熸潵鐨?20px鍙樹负640px浜嗭紝鑰屾槸鍦ㄥ疄闄呭搴︿笉鍙樼殑鎯呭喌涓嬶紝1px鍙樺緱璺熷師鏉ョ殑2px鐨勯暱搴︿竴鏍蜂簡锛屾墍浠ユ斁澶?鍊嶅悗鍘熸潵闇€瑕?20px鎵嶈兘濉弧鐨勫搴︾幇鍦ㄥ彧闇€瑕?60px灏卞仛鍒颁簡銆傚洜姝わ紝鎴戜滑鍙互寰楀嚭涓€涓叕寮忥細 visual viewport瀹藉害 = ideal viewport瀹藉害 / 褰撳墠缂╂斁鍊?/strong> 褰撳墠缂╂斁鍊?= ideal viewport瀹藉害 / visual viewport瀹藉害 澶у鏁版祻瑙堝櫒閮界鍚堣繖涓悊璁猴紝浣嗘槸瀹夊崜涓婄殑鍘熺敓娴忚鍣ㄤ互鍙奍E鏈変簺闂銆傚畨鍗撹嚜甯︾殑webkit娴忚鍣ㄥ彧鏈夊湪 initial-scale = 1 浠ュ強娌℃湁璁剧疆width灞炴€ф椂鎵嶆槸琛ㄧ幇姝ｅ父鐨勶紝涔熷氨鐩稿綋浜庤繖鐞嗚鍦ㄥ畠韬笂鍩烘湰娌＄敤锛涜€孖E鍒欐牴鏈笉鐢﹊nitial-scale杩欎釜灞炴€э紝鏃犺浣犵粰浠栬缃粈涔堬紝initial-scale琛ㄧ幇鍑烘潵鐨勬晥鏋滄案杩滄槸1銆?/p>
濂戒簡锛岀幇鍦ㄥ啀鏉ヨ涓媔nitial-scale鐨勯粯璁ゅ€奸棶棰橈紝灏辨槸涓嶅啓杩欎釜灞炴€х殑鏃跺€欙紝瀹冪殑榛樿鍊间細鏄灏戝憿锛熷緢鏄剧劧涓嶄細鏄?锛屽洜涓哄綋 initial-scale = 1 鏃讹紝褰撳墠鐨刲ayout viewport瀹藉害浼氳璁句负 ideal viewport鐨勫搴︼紝浣嗗墠闈㈣浜嗭紝鍚勬祻瑙堝櫒榛樿鐨?layout viewport瀹藉害涓€鑸兘鏄?80鍟婏紝1024鍟婏紝800鍟婄瓑绛夎繖浜涗釜鍊硷紝娌℃湁涓€寮€濮嬪氨鏄?ideal viewport鐨勫搴︾殑锛屾墍浠?initial-scale鐨勯粯璁ゅ€艰偗瀹氫笉鏄?銆傚畨鍗撹澶囦笂鐨刬nitial-scale榛樿鍊煎ソ鍍忔病鏈夋柟娉曡兘澶熷緱鍒帮紝鎴栬€呭氨鏄共鑴嗗畠灏辨病鏈夐粯璁ゅ€硷紝涓€瀹氳浣犳樉绀虹殑鍐欏嚭鏉ヨ繖涓笢瑗挎墠浼氳捣浣滅敤锛屾垜浠笉绠″畠浜嗭紝杩欓噷鎴戜滑閲嶇偣璇翠竴涓媔phone鍜宨pad涓婄殑initial-scale榛樿鍊笺€?/p>
鏍规嵁娴嬭瘯锛屾垜浠彲浠ュ湪iphone鍜宨pad涓婂緱鍒颁竴涓粨璁猴紝灏辨槸鏃犺浣犵粰layout viewpor璁剧疆鐨勫搴︽槸澶氬皯锛岃€屽張娌℃湁鎸囧畾鍒濆鐨勭缉鏀惧€肩殑璇濓紝閭ｄ箞iphone鍜宨pad浼氳嚜鍔ㄨ绠梚nitial-scale杩欎釜鍊硷紝浠ヤ繚璇佸綋鍓峫ayout viewport鐨勫搴﹀湪缂╂斁鍚庡氨鏄祻瑙堝櫒鍙鍖哄煙鐨勫搴︼紝涔熷氨鏄涓嶄細鍑虹幇妯悜婊氬姩鏉°€傛瘮濡傝锛屽湪iphone涓婏紝鎴戜滑涓嶈缃换浣曠殑viewport meta鏍囩锛屾鏃秎ayout viewport鐨勫搴︿负980px锛屼絾鎴戜滑鍙互鐪嬪埌娴忚鍣ㄥ苟娌℃湁鍑虹幇妯悜婊氬姩鏉★紝娴忚鍣ㄩ粯璁ょ殑鎶婇〉闈㈢缉灏忎簡銆傛牴鎹笂闈㈢殑鍏紡锛屽綋鍓嶇缉鏀惧€?= ideal viewport瀹藉害 / visual viewport瀹藉害锛屾垜浠彲浠ュ緱鍑猴細褰撳墠缂╂斁鍊?= 320 / 980 鎬讳箣璁颁綇杩欎釜缁撹灏辫浜嗭細鍦╥phone鍜宨pad涓婏紝鏃犺浣犵粰viewport璁剧殑瀹界殑鏄灏戯紝濡傛灉娌℃湁鎸囧畾榛樿鐨勭缉鏀惧€硷紝鍒檌phone鍜宨pad浼氳嚜鍔ㄨ绠楄繖涓缉鏀惧€硷紝浠ヨ揪鍒板綋鍓嶉〉闈笉浼氬嚭鐜版í鍚戞粴鍔ㄦ潯(鎴栬€呰viewport鐨勫搴﹀氨鏄睆骞曠殑瀹藉害)鐨勭洰鐨勩€?br>
绗竴绉嶆柟娉?/strong> 绗簩绉嶆柟娉?/strong> 瀹夊崜2.3鑷甫娴忚鍣ㄤ笂鐨勪竴涓猙ug 娴嬭瘯鐨勬墜鏈篿deal viewport 瀹藉害涓?20px锛岀涓€娆″脊鍑虹殑鍊兼槸600,浣嗚繖涓€煎簲璇ユ槸绗meta鏍囩鐨勭粨鏋滃晩锛岀劧鍚庣浜屾寮瑰嚭鐨勫€兼槸320锛岃繖鎵嶆槸绗竴琛宮eta鏍囩鎵€杈惧埌鐨勬晥鏋滃晩锛屾墍浠ュ湪瀹夊崜2.3(鎴栬鏄墍鏈?.x鐗堟湰涓?鐨勮嚜甯︽祻瑙堝櫒涓紝瀵筸eta viewport鏍囩杩涜瑕嗙洊鎴栨洿鏀癸紝浼氬嚭鐜拌浜洪潪甯歌糠绯婄殑缁撴灉銆?/p>
璇翠簡閭ｄ箞澶氬簾璇濓紝鏈€鍚庤繕鏄湁蹇呰鎬荤粨涓€鐐规湁鐢ㄧ殑鍑烘潵銆?/p>
棣栧厛濡傛灉涓嶈缃甿eta viewport鏍囩锛岄偅涔堢Щ鍔ㄨ澶囦笂娴忚鍣ㄩ粯璁ょ殑瀹藉害鍊间负800px锛?80px锛?024px绛夎繖浜涳紝鎬讳箣鏄ぇ浜庡睆骞曞搴︾殑銆傝繖閲岀殑瀹藉害鎵€鐢ㄧ殑鍗曚綅px閮芥槸鎸嘽ss涓殑px锛屽畠璺熶唬琛ㄥ疄闄呭睆骞曠墿鐞嗗儚绱犵殑px涓嶆槸涓€鍥炰簨銆?/p>
绗簩銆佹瘡涓Щ鍔ㄨ澶囨祻瑙堝櫒涓兘鏈変竴涓悊鎯崇殑瀹藉害锛岃繖涓悊鎯崇殑瀹藉害鏄寚css涓殑瀹藉害锛岃窡璁惧鐨勭墿鐞嗗搴︽病鏈夊叧绯伙紝鍦╟ss涓紝杩欎釜瀹藉害灏辩浉褰撲簬100%鐨勬墍浠ｈ〃鐨勯偅涓搴︺€傛垜浠彲浠ョ敤meta鏍囩鎶妚iewport鐨勫搴﹁涓洪偅涓悊鎯崇殑瀹藉害锛屽鏋滀笉鐭ラ亾杩欎釜璁惧鐨勭悊鎯冲搴︽槸澶氬皯锛岄偅涔堢敤device-width杩欎釜鐗规畩鍊煎氨琛屼簡锛屽悓鏃秈nitial-scale=1涔熸湁鎶妚iewport鐨勫搴﹁涓虹悊鎯冲搴︾殑浣滅敤銆傛墍浠ワ紝鎴戜滑鍙互浣跨敤 鏉ュ緱鍒颁竴涓悊鎯崇殑viewport锛堜篃灏辨槸鍓嶉潰璇寸殑ideal viewport锛夈€?/p>
涓轰粈涔堥渶瑕佹湁鐞嗘兂鐨剉iewport鍛紵姣斿涓€涓垎杈ㄧ巼涓?20x480鐨勬墜鏈虹悊鎯硋iewport鐨勫搴︽槸320px锛岃€屽彟涓€涓睆骞曞昂瀵哥浉鍚屼絾鍒嗚鲸鐜囦负640x960鐨勬墜鏈虹殑鐞嗘兂viewport瀹藉害涔熸槸涓?20px锛岄偅涓轰粈涔堝垎杈ㄧ巼澶х殑杩欎釜鎵嬫満鐨勭悊鎯冲搴﹁璺熷垎杈ㄧ巼灏忕殑閭ｄ釜鎵嬫満鐨勭悊鎯冲搴︿竴鏍峰憿锛熻繖鏄洜涓猴紝鍙湁杩欐牱鎵嶈兘淇濊瘉鍚屾牱鐨勭綉绔欏湪涓嶅悓鍒嗚鲸鐜囩殑璁惧涓婄湅璧锋潵閮芥槸涓€鏍锋垨宸笉澶氱殑銆傚疄闄呬笂锛岀幇鍦ㄥ競闈笂铏界劧鏈夐偅涔堝涓嶅悓绉嶇被涓嶅悓鍝佺墝涓嶅悓鍒嗚鲸鐜囩殑鎵嬫満锛屼絾瀹冧滑鐨勭悊鎯硋iewport瀹藉害褰掔撼璧锋潵鏃犻潪涔熷氨 320銆?60銆?84銆?00绛夊嚑绉嶏紝閮芥槸闈炲父鎺ヨ繎鐨勶紝鐞嗘兂瀹藉害鐨勭浉杩戜篃灏辨剰鍛崇潃鎴戜滑閽堝鏌愪釜璁惧鐨勭悊鎯硋iewport鑰屽仛鍑虹殑缃戠珯锛屽湪鍏朵粬璁惧涓婄殑琛ㄧ幇涔熶笉浼氱浉宸潪甯稿鐢氳嚦鏄〃鐜颁竴鏍风殑銆?/p> 以上是关于viewport銆佸竷灞€瑙嗗彛銆佽瑙夎鍙ｃ€佺悊鎯宠鍙?娣卞叆鐞嗚В的主要内容，如果未能解决你的问题，请参考以下文章 銆愮‖璐с€憊ue鍏ㄥ妗?Echarts+鐧惧害鍦板浘锛屾惌寤烘暟鎹彲瑙嗗寲绯荤粺
鐜板湪鎴戜滑宸茬粡鏈変袱涓獀iewport浜嗭細layout viewport 鍜?visual viewport銆備絾娴忚鍣ㄨ寰楄繕涓嶅锛屽洜涓虹幇鍦ㄨ秺鏉ヨ秺澶氱殑缃戠珯閮戒細涓虹Щ鍔ㄨ澶囪繘琛屽崟鐙殑璁捐锛屾墍浠ュ繀椤昏繕瑕佹湁涓€涓兘瀹岀編閫傞厤绉诲姩璁惧鐨剉iewport銆傛墍璋撶殑瀹岀編閫傞厤鎸囩殑鏄紝棣栧厛涓嶉渶瑕佺敤鎴风缉鏀惧拰妯悜婊氬姩鏉″氨鑳芥甯哥殑鏌ョ湅缃戠珯鐨勬墍鏈夊唴瀹癸紱绗簩锛屾樉绀虹殑鏂囧瓧鐨勫ぇ灏忔槸鍚堥€傦紝姣斿涓€娈?4px澶у皬鐨勬枃瀛楋紝涓嶄細鍥犱负鍦ㄤ竴涓珮瀵嗗害鍍忕礌鐨勫睆骞曢噷鏄剧ず寰楀お灏忚€屾棤娉曠湅娓咃紝鐞嗘兂鐨勬儏鍐垫槸杩欐14px鐨勬枃瀛楁棤璁烘槸鍦ㄤ綍绉嶅瘑搴﹀睆骞曪紝浣曠鍒嗚鲸鐜囦笅锛屾樉绀哄嚭鏉ョ殑澶у皬閮芥槸宸笉澶氱殑銆傚綋鐒讹紝涓嶅彧鏄枃瀛楋紝鍏朵粬鍏冪礌鍍忓浘鐗囦粈涔堢殑涔熸槸杩欎釜閬撶悊銆俻pk鎶婅繖涓獀iewport鍙仛 ideal viewport(鐞嗘兂瑙嗗彛)锛屼篃灏辨槸绗笁涓獀iewport鈥斺€旂Щ鍔ㄨ澶囩殑鐞嗘兂viewport锛宨deal viewport 鍙€氳繃window.screen.width鑾峰彇銆?/p>
浣嗘槸瀹夊崜璁惧灏辨瘮杈冨鏉備簡锛屾湁320px鐨勶紝鏈?60px鐨勶紝鏈?84px鐨勭瓑绛夛紝鍏充簬涓嶅悓鐨勮澶噄deal viewport鐨勫搴﹂兘涓哄灏戯紝鍙互鍒?http://viewportsizes.com?鍘绘煡鐪嬩竴涓嬶紝閲岄潰鏀堕泦浜嗕紬澶氳澶囩殑鐞嗘兂瀹藉害銆?/p>
2銆?/strong>鍦ㄦ墜鏈轰笂锛屾湁涓や釜瑙嗗彛锛屽竷灞€瑙嗗彛浼氶檺鍒禖SS甯冨眬锛涜瑙夎鍙ｅ喅瀹氱敤鎴风湅鍒扮殑缃戠珯鍐呭锛?br>
3銆?/strong>绉诲姩绔祻瑙堝櫒杩樻湁涓悊鎯宠鍙ｏ紝瀹冩槸瀵圭壒瀹氳澶囦笂鐨勭壒瀹氭祻瑙堝櫒鐨勫竷灞€瑙嗗彛鐨勪竴涓悊鎯冲昂瀵革紱
4銆?/strong>鍙互鎶婂竷灞€瑙嗗彛灏哄瀹氫箟涓虹悊鎯宠鍙ｃ€傝繖涔熸槸鍝嶅簲寮忚璁＄殑鍩虹銆?/p>
4. 鍒╃敤meta鏍囩瀵箆iewport杩涜鎺у埗
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
杩欎簺灞炴€у彲浠ュ悓鏃朵娇鐢紝涔熷彲浠ュ崟鐙娇鐢ㄦ垨娣峰悎浣跨敤锛屽涓睘鎬у悓鏃朵娇鐢ㄦ椂鐢ㄩ€楀彿闅斿紑灏辫浜嗐€?/p>
鐗瑰埆璇存槑鐨勬槸锛屽綋 target-densitydpi=device-dpi 鏃讹紝 css涓殑1px浼氱瓑浜庣墿鐞嗗儚绱犱腑鐨?px銆?br>
鍥犱负杩欎釜灞炴€у彧鏈夊畨鍗撴敮鎸侊紝骞朵笖瀹夊崜宸茬粡鍐冲畾瑕佸簾寮?target-densitydpi 杩欎釜灞炴€т簡锛屾墍浠ヨ繖涓睘鎬ф垜浠閬垮厤杩涜浣跨敤 銆?/em>
鍙互鐪嬪埌閫氳繃width=device-width锛屾墍鏈夋祻瑙堝櫒閮借兘鎶婂綋鍓嶇殑viewport瀹藉害鍙樻垚ideal viewport鐨勫搴︼紝浣嗚娉ㄦ剰鐨勬槸锛屽湪iphone鍜宨pad涓婏紝鏃犺鏄珫灞忚繕鏄í灞忥紝瀹藉害閮芥槸绔栧睆鏃秈deal viewport鐨勫搴︺€?/p>
<meta name="viewport" content="initial-scale=1">
娴嬭瘯缁撴灉琛ㄦ槑 initial-scale=1 涔熻兘鎶婂綋鍓嶇殑viewport瀹藉害鍙樻垚 ideal viewport 鐨勫搴︼紝浣嗚繖娆¤疆鍒颁簡windows phone 涓婄殑IE 鏃犺鏄珫灞忚繕鏄í灞忛兘鎶婂搴﹁涓虹珫灞忔椂ideal viewport鐨勫搴︺€備絾杩欑偣灏忕憰鐤靛凡缁忔棤鍏崇揣瑕佷簡銆?/p>
<meta name="viewport" content="width=400, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
6.1 鍏充簬缂╂斁浠ュ強initial-scale鐨勯粯璁ゅ€?/h2>
涔熷氨鏄綋鍓嶇殑initial-scale榛樿鍊煎簲璇ユ槸 0.33杩欐牱瀛愩€傚綋浣犳寚瀹氫簡initial-scale鐨勫€煎悗锛岃繖涓粯璁ゅ€煎氨涓嶈捣浣滅敤浜嗐€?/p>
6.2 鍔ㄦ€佹敼鍙榤eta viewport鏍囩
鍙互浣跨敤document.write鏉ュ姩鎬佽緭鍑簃eta viewport鏍囩锛屼緥濡傦細document.write(鈥?lt;meta name="viewport" content="width=device-width,initial-scale=1">鈥?
閫氳繃setAttribute鏉ユ敼鍙?/p>
<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById(鈥榯estViewport鈥?;
mvp.setAttribute(鈥榗ontent鈥?鈥榳idth=480鈥?;
</script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
alert(document.documentElement.clientWidth); //寮瑰嚭600锛屾甯告儏鍐靛簲璇ュ脊鍑?20
</script>
<meta name="viewport" content="width=600">
<script type="text/javascript">
alert(document.documentElement.clientWidth); //寮瑰嚭320锛屾甯告儏鍐靛簲璇ュ脊鍑?00
</script>
7. 缁撹
<meta name="viewport" content="width=device-width, initial-scale=1">