涓€鐩村h5椤甸潰鍏呮弧鏁话锛屾€€鐫€蹇愬繎鐨勫績鎯呭紑濮嬩簡鎴戠殑h5涔嬫梾銆傛垜鍙戠幇鐩存帴鐓ф妱缃戜笂鐨勬柟妗堟槸寰堝鏄撶殑锛屼絾鏄兂瑕佺湡姝ｇ悊瑙ｅ唴閮ㄥ師鐞嗭紝杩欏鎴戞墦鍑诲緢澶с€傞€氳繃鍦ㄧ綉涓婃煡鎵惧悇绉嶈祫鏂欙紝瀵瑰悇绉嶆蹇靛拰鍘熺悊閮戒簡瑙ｅ緱寰堟竻妤氥€傛墍浠ュ啓涓嬭繖绡囨枃绔犳槸鐢ㄦ潵绉疮鐭ヨ瘑鐨勩€傚鏋滄偍鏈変换浣曢棶棰橈紝璇锋寚姝ｏ紒鎴戜滑鍦ㄥ紑濮嬮€傞厤鎵嬫満鐨勬椂鍊欓渶瑕佷簡瑙ｄ竴浜涙蹇点€傛槸璁惧涓娇鐢ㄧ殑鐗╃悊鍍忕礌锛圥hysicpixel锛夈€傝繖涓崟浣嶇敤px鏉ヨ〃绀猴紝瀹冩槸涓€涓猍鐩稿缁濆鍗曚綅]鈥斺€斿嵆鍦ㄥ悓涓€涓澶囦笂锛屾瘡涓澶囧儚绱犳墍浠ｈ〃鐨勭墿鐞嗛暱搴︼紙姣斿鑻卞锛夋槸鍥哄畾鐨勶紙鍗宠澶囧儚绱犵殑缁濆鍊间絾鏄湪涓嶅悓鐨勮澶囦箣闂达紝姣忎釜璁惧鍍忕礌鎵€浠ｈ〃鐨勭墿鐞嗛暱搴︼紙姣斿鑻卞锛夋槸鍙互鏀瑰彉鐨勶紙涔熷氨鏄澶囧儚绱犵殑鐩稿鎬э級锛涙€荤粨涓€涓嬶細灏辨槸鍍忕礌鐩稿綋浜庢垜浠瘡澶╀娇鐢ㄧ殑搴﹂噺鎻愬埌浜嗗帢绫筹紙cm锛夈€佺背锛坢锛夊拰鍏嬶紙g锛夌殑鍗曚綅锛屼絾涓嶅悓鐨勬槸瀹冩槸涓€涓浉瀵瑰崟浣嶏紝涓嶅悓鐨勮澶囧搴旂殑鑻卞鏄笉鍚岀殑銆傝澶囧儚绱犳槸澶氬皯杩欐牱鐨勫崟浣嶅儚绱犺繖涓澶囦笂鎬诲叡鏈?.css涓殑px鐩稿綋浜庤澶囩殑鐙珛鍍忕礌锛屼篃鏄竴涓浉瀵瑰崟浣嶏紝鎵€浠ュ畠鍦ㄤ竴涓澶囦笂琛ㄨ揪澶氬皯鑻卞昂鏄笉纭畾鐨勶紝闄や簡鍙梬idth鐨勫奖鍝嶈澶囥€備互涓嬩袱涓洜绱犱細褰卞搷瀹冦€?.灞忓箷甯冨眬鍜岃鍙ｅぇ灏?.灞忓箷鍒嗚鲸鐜囦粠涓婇潰鐨勬蹇碉紝鎴戜滑鐭ラ亾1璁惧鍍忕礌鈮?css鍍忕礌锛岄偅涔堜负浠€涔堟垜浠湪璁捐鏃朵笉鑰冭檻杩欎釜闂鍛紵浠ュ墠鍋氳繃缃戦〉鍚楋紵1妗岄潰娴忚鍣ㄤ腑css涓殑姣忎竴涓儚绱犲線寰€瀵瑰簲鐫€鐢佃剳灞忓箷鐨勪竴涓墿鐞嗗儚绱狅紝杩欏彲鑳戒細璁╂垜浠骇鐢熶竴绉嶉敊瑙夛紝璁や负css涓殑鍍忕礌灏辨槸璁惧鐨勭墿鐞嗗儚绱犮€傛儏鍐靛苟闈炲姝わ紙涓婅堪鍘熷洜锛夛紝浣嗗湪绉诲姩璁惧涓婏紝蹇呴』寮勬竻妤氳繖涓€鐐广€傚湪鏃╂湡鐨勭Щ鍔ㄨ澶囦腑锛屽睆骞曞儚绱犲瘑搴︽瘮杈冧綆锛屾瘮濡俰phone3锛屽畠鐨勫垎杈ㄧ巼鏄?20x480锛屽湪iphone3涓婏紝涓€涓猚ss鍍忕礌纭疄绛変簬涓€涓睆骞曠墿鐞嗗儚绱犮€傚悗鏉ラ殢鐫€鎶€鏈殑鍙戝睍锛岀Щ鍔ㄨ澶囩殑灞忓箷鍍忕礌瀵嗗害瓒婃潵瓒婇珮銆備粠iphone4寮€濮嬶紝鑻规灉鎺ㄥ嚭浜嗘墍璋撶殑Retina灞忓箷锛屽皢鍒嗚鲸鐜囩炕鍊嶈嚦640x960锛屼絾灞忓箷灏哄骞舵病鏈夋敼鍙樸€傝繖鎰忓懗鐫€鍦ㄧ浉鍚屽昂瀵哥殑灞忓箷涓婏紝鏈変袱鍊嶇殑鍍忕礌銆傝繖鏃讹紝涓€涓狢SS鍍忕礌绛変簬涓や釜鐗╃悊鍍忕礌銆傚叾浠栧搧鐗岀殑绉诲姩璁惧涔熸槸濡傛銆備緥濡傦紝Android璁惧鏍规嵁灞忓箷鍍忕礌瀵嗗害鍙垎涓簂dpi銆乵dpi銆乭dpi銆亁hdpi绛変笉鍚屾。娆★紝鍒嗚鲸鐜囦篃浜旇姳鍏棬銆侫ndroid璁惧涓婃湁澶氬皯灞忓箷鐗╃悊鍍忕礌鐩稿綋浜庝竴涓猚ss鍍忕礌涔熷洜璁惧鑰屽紓銆傛病鏈夌粨璁恒€傝繖涓や釜姒傚康瀵规垜浠紑鍙慼5椤甸潰鏈変粈涔堟牱鐨勫奖鍝嶅憿锛熷搱鍝堬紝浣犺杩欎笉鏄簾璇濆悧锛熷綋鐒讹紝涓嶅彲鑳藉皢璁捐甯堢殑璁捐绋?00%杩樺師鍒版墜鏈轰笂锛屽棷锛屾槸鐨勶紝浣犳病鐪嬮敊锛岄偅鎬庝箞鎵嶈兘鍋氬埌100%杩樺師鍛紵杩欓噷鍏堜拱涓猭ey锛屽悗闈㈡參鎱㈠垎鏋愩€?銆佽澶囧垎杈ㄧ巼锛堣澶囧垎杈ㄧ巼鐨勫崟浣嶅氨鏄笂闈㈣鐨勮澶囧儚绱狅級鍏堣鍥剧墖鍒嗚鲸鐜囩殑姒傚康銆傜浉淇″ぇ瀹堕兘鎺ヨЕ杩囧緢澶氥€傛垜浠兘鐭ラ亾锛屽悓鏍峰楂樼殑灞忓箷锛屽垎杈ㄧ巼瓒婇珮锛屽睆骞曠殑娓呮櫚搴﹀氨瓒婇珮銆備负浠€涔堟槸杩欐牱锛熷洜涓鸿澶囧儚绱犳槸灞忓箷涓婄殑姣忎竴涓偣锛岃澶囩殑鍒嗚鲸鐜囧氨鏄按骞崇偣鏁?鍨傜洿鐐规暟銆傝繖涓偣鏄竴涓竴涓殑鎷兼帴鑹插潡銆傜浉鍚岀墿鐞嗗搴﹀唴杩欐牱鐨勯┈璧涘厠鑹插潡瓒婂锛屾樉鐒舵垜浠湅鍒扮殑棰滆壊浼氳秺娓呮櫚銆傝澶囩殑鍒嗚鲸鐜囧湪鍑哄巶鏃跺凡缁忚缃ソ锛屾棤娉曟洿鏀广€傜湅鍒拌繖閲屽彲鑳芥湁浜轰細鏈夌枒鎯戙€傛垜浠湪浣跨敤鐢佃剳鐨勬椂鍊欙紝閮芥槸鍙互璋冭妭鐢佃剳鐨勫垎杈ㄧ巼鐨勶紝涓婇潰璋冭妭鍒嗚鲸鐜囩殑鏃跺€欙紝濡備綍璋冭妭鍍忕礌鏁板憿锛熷儚绱犺繕鏄偅涔堝銆備笉淇′綘鐪嬬數鑴戯紝绯荤粺鎺ㄨ崘1366px鍒?68px鐨勫垎杈ㄧ巼銆備綘鐭ラ亾杩欐槸浠€涔堟剰鎬濆悧锛熸病閿欙紝寰蒋鍦ㄨ繖鍧楀睆骞曚笂璁剧疆浜嗘í鍚?68鍍忕礌锛岀旱鍚?366鍍忕礌銆傛棤璁轰綘鎷夊灏戯紝杩欎釜鏁板瓧閮戒笉浼氭敼鍙樸€傞偅涔堬紝涓轰粈涔堟垜浠嶇劧鍙互璋冩暣鍒嗚鲸鐜囷紵濡傛灉鎴戣皟鏁翠负800px600px锛屾寜鐓у畾涔夛紝姘村钩鏄?0鍍忕礌锛屽瀭鐩存槸800鍍忕礌銆傚疄闄呬笂锛屽鏋滀綘鎶婂垎杈ㄧ巼璋冨埌800-600锛岀郴缁熷氨浼氱粰浣犲垎閰?00-600涓湁鏁堝儚绱狅紝杩欐墠鏄湡姝ｇ殑鑹插潡銆傝嚦浜庡叾浠栫殑鏁板瓧锛岀郴缁熻嚜琛屽喅瀹氾紝閫氳繃涓€绯诲垪鐨勮绠楋紝缁欎綘涓€涓ā鎷熺殑鑹插潡锛屾濂藉～鍏呭埌1366*768涓壊鍧椾腑銆傝繖浜涚敤鏉ヨ鍙风殑鍍忕礌鍧楁槸鍜岀湡姝ｇ殑鍍忕礌鍧楁斁鍦ㄤ竴璧风殑銆傚氨鍍忔瑙勫啗涓€鏍凤紝閲岄潰鏈夊緢澶氭潅鍏点€傚彧鑳芥槸鍥㈤槦涓嶅濂藉甫澶淬€?銆佸睆骞曞儚绱犲瘑搴︼紙PPI锛屾瘡鑻卞昂鏄剧ず鐨勫儚绱犳暟锛夎绠楀叕寮廝PI=灞忓箷瀵硅绾夸笂鐨勫儚绱犳暟/灞忓箷瀵硅绾跨殑闀垮害銆傜敱姝ゆ垜浠彲浠ョ煡閬擄紝PPI瓒婂ぇ锛屽睆骞曠殑鍒嗚鲸鐜囧氨瓒婇珮銆?.Viewport瑙嗗彛甯冨眬瑙嗗彛锛屽竷灞€瑙嗗彛鏄笉鍙鐨勶紝娴忚鍣ㄥ巶鍟嗚缃殑涓€涓浐瀹氬€硷紝涓€鑸湪768px鍒?024px涔嬮棿銆傝繖閲屾垜浠彲浠ユ妸瀹冪湅鎴愭槸灞曠ず缃戦〉鐨勭敾鏉裤€傝瑙夎鍙ｏ紝娴忚鍣ㄥ彲瑙佸尯鍩熺殑澶у皬锛屼篃灏辨槸鐢ㄦ埛鐪嬪埌鐨勭綉椤靛尯鍩燂紝缁ф壙浜嗗竷灞€瑙嗗彛鐨勫搴︼紝鎵€浠ユ垜浠彲浠ユ妸980px锛坈ss鍍忕礌锛夋斁鍦ㄥ竷灞€瑙嗗彛涓?80px鐨勬祻瑙堝櫒涓婄殑涓€琛岋級鍐呭銆俰dealviewport锛屽嵆璁惧鏈€鐞嗘兂鐨勫竷灞€瑙嗗彛锛岀敤鎴锋棤闇€缂╂斁椤甸潰鍗冲彲瀹岀編鏄剧ず鏁翠釜椤甸潰銆傝繖涓悊鎯冲搴︽槸鎸囦互CSS鍍忕礌涓哄崟浣嶈绠楃殑瀹藉害锛屽嵆灞忓箷鐨勯€昏緫鍍忕礌瀹藉害锛屼笌璁惧鐨勭墿鐞嗗搴︽棤鍏炽€傚湪css涓紝杩欎釜瀹藉害鐩稿綋浜?00%琛ㄧず鐨勫搴︺€?銆侀偅鎬庝箞鎵嶈兘100%鎭㈠缃戦〉鍛紵棣栧厛鎴戜滑鎯充竴涓嬩笂闈㈢殑褰卞搷锛?px鐨刢ss鍍忕礌涓嶄唬琛?涓澶囧儚绱狅紝鎵€浠ュ綋dpr>1鐨勬椂鍊欙紝鎴戜滑浼氬彂鐜版垜浠缃殑1px鍍忕礌鏄庢樉鍙樼矖浜嗭紝椤甸潰鏃犳硶缂╂斁涓庤璁＄姣斾緥鐩稿悓銆傛垜浠殑鐩殑鏄1涓澶囧儚绱犵瓑浜?涓猚ss鍍忕礌銆傞壌浜庤繖涓洰鐨勶紝璇磋鎴戠殑鎵撶畻鍚с€傚叿浣撲唬鐮佸彲浠ョ湅鎴戝啓鐨刣emo鏍规嵁涓嶅悓灞忓箷鍔ㄦ€佸啓鍏ont-size鍜屾敼鍙榣ayoutviewport锛屽苟浣跨敤rem浣滀负瀹藉害鍗曚綅1.浣跨敤meta鏍囩璁剧疆viewport锛岃1涓猚ss鍍忕礌鐩哥瓑涓?璁惧鍍忕礌锛宒pr涓?渚嬪锛?metaname="viewport"content="width=device-width,initial-scale=0.5,max-scale=0.5,min-scale=0.5">瑙ｉ噴锛氱涓€涓猘ll锛屾垜浠鐭ラ亾锛屽鏋滄病鏈夎缃甿etaviewport鏍囩锛岄偅涔堢Щ鍔ㄨ澶囨祻瑙堝櫒榛樿鐨勫竷灞€瑙嗗彛瀹藉害鏄?80px銆?024px绛夛紝鎵€浠ョ涓€姝ヨ璁剧疆瑙嗗彛瀹藉害涓庡竷灞€瀹藉害锛屽嵆鍦℉TMLheader涓缃?metaname="viewport"content="width=device-width,initial-scale=1">锛堟鏃舵垜浠彲浠ュ疄鐜拌嚜閫傚簲缃戦〉锛屾棤闇€鍋氫笅涓€姝ワ紝浣嗘槸鏈?px鐨勯棶棰橈紝鎴戜滑鍙互閫氳繃涓嬩竴姝ユ潵瑙ｅ喅杩欎釜闂锛夈€傜劧鍚庣敤js鑾峰彇涓嶅悓鐨刣pr鑾峰彇scale=1/dpr璁剧疆
