1.\u5b9e\u73b0\u65b9\u5f0f<\/p>\n
\u57fa\u672c\u4e0a\u6709\u4e24\u79cd\u65b9\u5f0f\u5b9e\u73b0\u5728android\u4e0a\u5f00\u53d1web\u7a0b\u5e8f\uff0c\u4e00\u79cd\u901a\u8fc7\u4f7f\u7528Android\u00a0SDK\u5f00\u53d1apk\uff0c\u7528webView\u5b9e\u73b0\uff1b\u53e6\u4e00\u79cd\u4f7f\u7528web\u6807\u51c6\u5f00\u53d1\uff0c\u901a\u8fc7\u7f51\u7edc\u6d4f\u89c8\u5668\u8bbf\u95ee.<\/p>\n
2.\u00a0\u7279\u70b9
\na.\u652f\u6301viewport\u5c5e\u6027\uff0c\u8ba9\u5e94\u7528\u4ee5\u6b63\u786e\u7684\u5927\u5c0f\u9002\u5e94\u4e0d\u540c\u5c3a\u5bf8\u7684\u5c4f\u5e55
\nb.CSS\u548cJavaScript\u652f\u6301\uff0c\u63d0\u4f9b\u4e0d\u540c\u7684\u98ce\u683c\u548c\u57fa\u4e8e\u5c4f\u5e55\u7684\u50cf\u7d20\u5bc6\u5ea6\uff08\u5c4f\u5e55\u5206\u8fa8\u7387\uff09\u7684\u56fe\u50cf<\/p>\n
\u6240\u4ee5\uff0c\u4e3aAndroid\u5f00\u53d1\u4e00\u4e2aWeb\u5e94\u7528\u7a0b\u5e8f\u53ef\u4ee5\u6392\u9664\u5c4f\u5e55\u652f\u6301\u7684\u8003\u8651,\u5e94\u4e3a\u5df2\u7ecf\u5f88\u5bb9\u6613\u8ba9\u4f60\u7684\u7f51\u9875\u9002\u5e94\u6240\u6709\u642d\u8f7dandroid\u7cfb\u7edf\u7684\u5c4f\u5e55\u00a0\u3002<\/p>\n
Android \u7684\u53e6\u4e00\u5927\u7279\u70b9\u662f\uff0c\u53ef\u4ee5\u6df7\u5408WebView\u548cAPK\u4e24\u4e2a\u4e00\u8d77\u5f00\u53d1\u4e00\u4e2aAndroid\u5ba2\u6237\u7aef\u7684\u5e94\u7528\u7a0b\u5e8f\u3002\u00a0\u00a0\u00a0\u53ef\u4ee5\u5b9a\u4e49\u4f60\u7684Android\u5e94\u7528\u7a0b\u5e8f\u548c\u7f51\u9875\u4e4b\u95f4 \u7684\u63a5\u53e3\uff0c\u5141\u8bb8\u7f51\u9875\u4e2d\u7684JavaScript\u8c03\u7528Android\u5e94\u7528\u7a0b\u5e8f\u63d0\u4f9b\u57fa\u4e8eWeb\u7684\u5e94\u7528\u7a0b\u5e8f\u7684Android\u00a0API\u3002<\/p>\n
\u9488\u5bf9Web\u5e94\u7528\u7a0b\u5e8f\u7684\u5c4f\u5e55<\/p>\n
1.\u9488\u5bf9Android\u8bbe\u5907\u5f00\u53d1\u7f51\u9875\u65f6\uff0c\u6709\u4e24\u4e2a\u57fa\u672c\u56e0\u7d20
\na.viewport\u5927\u5c0f\u548c\u7f29\u653e\u7684\u7f51\u9875<\/p>\n
Android\u6d4f\u89c8\u5668\u52a0\u8f7d\u7f51\u9875\u65f6\uff0c\u9ed8\u8ba4\u884c\u4e3a\u662f\u5728\u201c\u9884\u89c8\u6a21\u5f0f\u201d\uff0c\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u7f51\u9875\u7f29\u653e\u7684\u89d2\u5ea6\u52a0\u8f7d\u9875\u9762\u3002
\n\u53ef\u4ee5\u4e3a\u7f51\u9875\u5b9a\u4e49viewport\u7684\u9ed8\u8ba4\u5c3a\u5bf8\u6216viewport\u7684\u521d\u59cb\u7f29\u653e\uff0c\u00a0\u8fd8\u53ef\u4ee5\u63a7\u5236\u591a\u5c11\u7528\u6237\u53ef\u4ee5\u653e\u5927\u548c\u7f29\u5c0f\u7f51\u9875\u3002\u7528\u6237\u8fd8\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u8bbe\u7f6e\u7981\u7528\u9884\u89c8\u6a21\u5f0f\uff0c\u6240\u4ee5\u4e0d\u5e94\u8be5\u8bbe\u7f6e\u9875\u9762\u52a0\u8f7d\u6a21\u5f0f\uff0c\u5e94\u8be5\u81ea\u5b9a\u4e49viewport\u5927\u5c0f\u6216\u7f29\u653e\u3002<\/p>\n
b.\u00a0\u8be5\u8bbe\u5907\u7684\u5c4f\u5e55\u5bc6\u5ea6
\nAndroid \u8bbe\u5907\u5c4f\u5e55\u5bc6\u5ea6\uff08\u6bcf\u82f1\u5bf8\u50cf\u7d20\u6570\uff09\u5f71\u54cd\u7f51\u9875\u663e\u793a\u7684\u5206\u8fa8\u7387\u548c\u5927\u5c0f\u3002\uff08\u4e09\u5c4f\u5bc6\u5ea6\u7c7b\u522b\uff1a\u4f4e\uff0c\u4e2d\uff0c\u9ad8\uff09\u3002Android\u6d4f\u89c8\u5668\u548cWebView\u4e2d,\u00a0\u51cf\u5c11\u7f29\u653e\u7f51\u9875\u5728\u5c4f \u5e55\u5bc6\u5ea6\u7684\u53d8\u5316\u3002\u5982\u679c\u56fe\u7247\u662f\u7f51\u9875\u8bbe\u8ba1\u7684\u91cd\u8981\u5143\u7d20\uff0c\u4f60\u5e94\u8be5\u5bc6\u5207\u5173\u6ce8\u5728\u4e0d\u540c\u7684\u5bc6\u5ea6\u4e2d\u56fe\u50cf\u7684\u7f29\u653e\uff0c\u56e0\u4e3a\u53ef\u4ee5\u4ea7\u751f\u6a21\u7cca\u7684\u6548\u679c\u3002\u8981\u4e3a\u6240\u6709\u5bc6\u5ea6\u7684\u5c4f\u5e55\uff0c\u63d0\u4f9b\u6700\u4f73\u7684\u89c6\u89c9\u6548 \u679c\uff0c\u5e94\u8be5\u63a7\u5236\u7f29\u653e\uff0c\u6839\u636e\u76ee\u6807\u5c4f\u5e55\u7684\u5bc6\u5ea6\u63d0\u4f9b\u8d44\u6e90\uff0c\u53ef\u4ee5\u9002\u7528\u4e8e\u4e0d\u540c\u5c4f\u5e55\u4f7f\u7528\u7684CSS\u6216JavaScript\u7684\u66ff\u4ee3\u56fe\u7247\u3002<\/p>\n
\u4f7f\u7528viewport<\/p>\n
viewport \u662f\u7f51\u9875\u53ef\u7ed8\u5236\u7684\u533a\u57df\u3002\u867d\u7136viewport\u53ef\u89c6\u9762\u79ef\u548c\u5c4f\u5e55\u5c3a\u5bf8\u76f8\u5339\u914d\uff0c\u4f46viewport\u6709\u5176\u81ea\u5df1\u7684\u5c3a\u5bf8\uff0c\u786e\u5b9a\u7f51\u9875\u7684\u50cf\u7d20\u6570\u91cf\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u7f51\u9875\u7684\u50cf\u7d20\u6570\u91cf \u8d85\u8fc7\u5b9a\u4e49\u7684viewport\u5c3a\u5bf8\uff0c\u800c\u4e0d\u662f\u8bbe\u5907\u5c4f\u5e55\u5c3a\u5bf8\u7684\u5c4f\u5e55\u9762\u79ef\u3002\u4f8b\u5982\uff0c\u867d\u7136\u8bbe\u5907\u5c4f\u5e55\u4e0a\u53ef\u80fd\u6709\u4e00\u4e2a480\u50cf\u7d20\u5bbd\uff0cviewport\u53ef\u4ee5\u6709\u4e00\u4e2a800\u50cf\u7d20 \u5bbd\uff0c\u8fd9\u6837\u7f51\u9875\u8bbe\u8ba1\u662f\u5bbd800\u50cf\u7d20\u5b8c\u5168\u663e\u793a\u5728\u5c4f\u5e55\u4e0a\u3002<\/p>\n
\u53ef \u4ee5\u5728HTML\u00a0\u7f51\u9875\u4e2d\u4f7f\u7528viewport\u5c5e\u6027\uff08\u5fc5\u987b\u8bbe\u7f6e\u7f6e\u5728\u6587\u6863<HEAD>\u7684<META>\u4e2d\uff09\u3002\u53ef\u4ee5 \u5728<meta>\u4e2d\u5b9a\u591a\u4e2aviewport\u5c5e\u6027\uff0c\u4f8b\u5982\uff0c\u4f60\u53ef\u4ee5\u5b9a\u4e49viewport\u7684\u9ad8\u5ea6\u548c\u5bbd\u5ea6\uff0c\u9875\u9762\u521d\u59cb\u7f29\u653e\uff0c\u548c\u76ee\u6807\u5c4f\u5e55\u5bc6\u5ea6\uff0c\u6bcf\u4e2a viewport\u5c5e\u6027\u4e2d\u7684\u5c5e\u6027\u5185\u5bb9\u5fc5\u987b\u7528\u9017\u53f7\u9694\u5f00\u3002<\/p>\n
\u4f8b\u5982\u4e0b\u9762\u7684\u4ee3\u7801\u7247\u65ad\uff0c\u4ece\u4e00\u4e2aHTML\u6587\u6863\u6307\u5b9aviewport\u5c5e\u6027\u7684\u5bbd\u5ea6\u5e94\u5b8c\u5168\u5339\u914d\u8bbe\u5907\u5c4f\u5e55\u7684\u5bbd\u5ea6\uff0c\u5e76\u7981\u7528\u7f29\u653e\u3002
\n<head>
\n<title>Example<\/title>
\n<meta\u00a0name=”viewport”\u00a0content=”width=device-width,\u00a0user-scalable=no”\u00a0\/>
\n<\/head><\/p>\n
content=”width=device-width”
\nviewport\u7684\u5bbd\u5ea6\u7b49\u4e8e\u8bbe\u5907\u5bbd\u5ea6\uff0cviewport\u4f1a\u6839\u636e\u5c4f\u5e55\u5bbd\u5ea6\u81ea\u52a8\u9002\u5e94\uff0c\u5e76\u4e14\u5bf9\u56fe\u7247\u548c\u6587\u5b57\u8fdb\u884c\u7f29\u653e\u663e\u793a.<\/p>\n
\u8fd9\u662f\u4e00\u4e2a\u53ea\u6709\u4e24\u4e2aviewport\u5c5e\u6027\u7684\u4f8b\u5b50\u3002\u4e0b\u5217\u8bed\u6cd5\u663e\u793a\u6240\u6709\u652f\u6301\u7684viewport\u5c5e\u6027\u548c\u6bcf\u4e00\u4e2a\u63a5\u53d7\u7684\u503c\u4e00\u822c\u7c7b\u578b
\n<meta\u00a0name=”viewport”
\ncontent=”
\nheight\u00a0=\u00a0[pixel_value\u00a0|\u00a0device-height]\u00a0,
\nwidth\u00a0=\u00a0\u00a0[pixel_value\u00a0|\u00a0device-width\u00a0]\u00a0,
\ninitial-scale\u00a0=\u00a0float_value\u00a0,
\nminimum-scale\u00a0=\u00a0float_value\u00a0,
\nmaximum-scale\u00a0=\u00a0float_value\u00a0,
\nuser-scalable\u00a0=\u00a0[yes\u00a0|\u00a0no]\u00a0,
\ntarget-densitydpi\u00a0=\u00a0[dpi_value\u00a0|\u00a0device-dpi\u00a0|
\nhigh-dpi\u00a0|\u00a0medium-dpi\u00a0|\u00a0low-dpi]
\n”\u00a0\/><\/p>\n
\u5b9a\u4e49viewport\u5927\u5c0f<\/p>\n
\u5b9a\u4e49viewport\u7684\u9ad8\u5ea6\u548c\u5bbd\u5ea6\u5c5e\u6027\u6307\u5b9aviewport\u5927\u5c0f\u3002<\/p>\n
\u5728 \u4e0a\u9762\u7684\u4ecb\u7ecd\u4e2d\u63d0\u5230\uff0cAndroid\u6d4f\u89c8\u5668\u9ed8\u8ba4\u4ee5\u201c\u9884\u89c8\u6a21\u5f0f\u201d\u52a0\u8f7d\u9875\u9762\uff08\u9664\u975e\u7528\u6237\u7981\u7528\uff09.\u5982\u679cviewport\u7684\u5bbd\u5ea6\u4e3a800\u50cf\u7d20,\u00a0\u60a8\u7684\u7f51\u9875\u6307\u5b9a\u5176\u5927\u5c0f\u662f \u5bbd320\u50cf\u7d20\uff0c\u90a3\u4e48\u4f60\u7684\u7f51\u9875\u5c0f\u4e8e\u53ef\u89c1\u5c4f\u5e55.\u00a0\u4e3a\u4e86\u907f\u514d\u7f29\u653e\u6548\u679c\uff0c\u4f60\u5e94\u8be5\u660e\u786e\u5b9a\u4e49viewport\u5bbd\u5ea6,\u4f7f\u5176\u4e0e\u8bbe\u8ba1\u7684\u7f51\u9875\u7684\u5bbd\u5ea6\u76f8\u5339\u914d\u3002<\/p>\n
\u4f8b\u5982\uff0c\u5982\u679c\u60a8\u7684\u7f51\u9875\u8bbe\u8ba1\u662f\u6574\u6574320\u50cf\u7d20\u5bbd\uff0c\u90a3\u4e48\u4f60\u53ef\u80fd\u8981\u6307\u5b9a\u89c6\u53e3\u5bbd\u5ea6\u5927\u5c0f\uff1a
\n<meta\u00a0name=”viewport”\u00a0content=”width=320″\u00a0\/>
\n\u5982\u679c\u6307\u5b9aviewport\u7684\u5bbd\u5ea6,\u90a3\u4e48\u56fe\u7247\u5c06\u4e0d\u4f1a\u88ab\u7f29\u653e,\u5982\u679cviewport\u00a0\u5927\u4e8e\u5c4f\u5e55\u7684\u5b9e\u9645\u50cf\u7d20,\u90a3\u4e48\u56fe\u7247\u5c06\u4e0d\u80fd\u5b8c\u5168\u663e\u793a,\u9700\u8981\u62d6\u52a8\u624d\u80fd\u770b\u5230\u5b8c\u6574\u6548\u679c.<\/p>\n
\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u60a8\u7684\u7f51\u9875\u5b8c\u5168\u9002\u5408\u5c4f\u5e55\u7684\u5bbd\u5ea6\uff0c\u56e0\u4e3a\u7f51\u9875\u7684\u5bbd\u5ea6\u548c\u89c6\u53e3\u7684\u5bbd\u5ea6\u662f\u76f8\u540c\u7684\u3002<\/p>\n
\u6ce8\uff1a\u5bbd\u5ea6\u503c\u5927\u4e8e10,000\u548c\u5927\u4e8e\uff08\u6216\u7b49\u4e8e\uff09320\u88ab\u5ffd\u7565,\u00a0\u7ed3\u679c\u5728\u8bbe\u5907\u5bbd\u5ea6\u7b49\u4e8e\u4e00\u4e2a\u503c\u3002\u7136\u540e\u9ad8\u5ea6\u503c\u5927\u4e8e10,000\u6216\u5c0f\u4e8e200\u7684\u4e5f\u88ab\u5ffd\u7565\u3002<\/p>\n
\u6ce8\uff1a \u9ed8\u8ba4\u60c5\u51b5\u4e0b,\u00a0\u5982\u679c\u4f60\u8bbe\u7f6e\u4e86viewport\u7684\u5bbd\u5ea6\u5339\u914d\u60a8\u7684\u7f51\u7ad9\u9875\u9762\u5bbd\u5ea6\u548c\u8bbe\u5907\u7684\u5c4f\u5e55\u5bbd\u5ea6\u5e76\u6ca1\u6709\u7b26\u5408\u7684\u5c3a\u5bf8\uff0c\u7136\u800c\u7f51\u9875\u4ecd\u7136\u9002\u5408\u9ad8\u6216\u4f4e\u5bc6\u5ea6\u7684\u5c4f\u5e55.\u00a0\u56e0\u4e3a Android\u6d4f\u89c8\u5668\u4f1a\u4ee5\u4e00\u4e2a\u4e2d\u7b49\u5bc6\u5ea6\u5c4f\u5e55\u7684\u5927\u5c0f\u76f8\u5339\u914d\u7684WebView\u52a0\u8f7d\u7f51\u9875.\u5c4f\u5e55\u5bc6\u5ea6\u8ba8\u8bba\u4e86\u66f4\u591a\u7684\u5b9a\u4e49viewport\u7684\u76ee\u6807\u5bc6\u5ea6\u3002<\/p>\n
\u81ea\u52a8\u8c03\u6574\u5927\u5c0f<\/p>\n
\u6307 \u5b9aviewport\u5c3a\u5bf8\u7cbe\u786e\u50cf\u7d20\u7684\u66ff\u4ee3\u54c1\uff0c\u4f60\u53ef\u4ee5\u8bbe\u7f6eviewport\u7684\u5927\u5c0f\u603b\u662f\u5339\u914d\u8bbe\u5907\u7684\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u5b9a\u4e49viewport\u5c5e\u6027\u7684\u9ad8\u5ea6\u00a0\u548c\u5bbd\u5ea6\u4e0e\u8bbe\u5907\u9ad8\u5ea6 \u548c\u8bbe\u5907\u5bbd\u5ea6\u503c\u5339\u914d\u3002\u5f53\u4f60\u6b63\u5728\u5f00\u53d1\u4e00\u4e2aweb\u5e94\u7528\uff0c\u5177\u6709\u672a\u77e5\u7684\u5bbd\u5ea6\uff08\u4e0d\u56fa\u5b9a\u5bbd\u5ea6\uff09\uff0c\u4f46\u4f60\u5e0c\u671b\u5b83\u5b8c\u7f8e\u5951\u5408\u6bcf\u4e00\u4e2a\u5c4f\u5e55\uff0c\u5982\u7f51\u9875\u7684\u5bbd\u5ea6\u76f8\u4e92\u5339\u914d\u5c4f\u5e55\u3002\u4f8b\u5982\uff1a<\/p>\n
<meta\u00a0name=”viewport”\u00a0content=”width=device-width”\u00a0\/>
\nwidth=device- width,\u00a0\u548cviewport\u7684\u5bbd\u5ea6\u5339\u914d\uff0c\u65e0\u8bba\u5f53\u524d\u5c4f\u5e55\u5bbd\u5ea6\u662f\u4e0d\u662f\u6307\u5b9a\u7684\u5927\u5c0f\u3002\u91cd\u8981\u7684\u662f\u8981\u6ce8\u610f\u5230\uff0c\u5728\u7f29\u653e\u4ee5\u9002\u5408\u5c4f\u5e55\u5927\u5c0f\u7684\u56fe\u50cf\u65f6\uff0c\u5f53\u524d\u7684\u8bbe\u5907\u4e0d\u5339\u914d\u76ee \u6807\u5bc6\u5ea6\uff0c\u9ed8\u8ba4\u4e2d\u5bc6\u5ea6\u3002\u56e0\u6b64\uff0c\u5bf9\u9ad8\u5bc6\u5ea6\u8bbe\u5907\u5728\u663e\u793a\u7684\u56fe\u50cf\u8fdb\u884c\u7f29\u653e\uff0c\u4e3a\u4e86\u914d\u5408\u4e2d\u5bc6\u5ea6\u5c4f\u5e55\u5c4f\u5e55\u7684\u5bbd\u5ea6\u3002<\/p>\n
\u7f51\u9875\u5bbd\u5ea6\u4e0eviewport\u8bbe\u5907\u7684\u5bbd\u5ea6\u6216\u521d\u59cb\u7f29\u653e\u4e3a1.0\u3002<\/p>\n
\u6ce8\uff1a\u5982\u679c\u4e0d\u662f\u7528\u7f29\u653e\u7f51\u9875\u6765\u5339\u914d\u8bbe\u5907\u5c3a\u5bf8,\u5fc5\u987b\u6307\u5b9a\u76ee\u6807\u8bbe\u5907densitydpi\u3002\u8fd9\u662f\u8ba8\u8bba\u6709\u5173\u5b9a\u4e49viewport\u5bc6\u5ea6\u7684.\u5426\u5219\uff0c\u7b80\u5355\u5730\u4f7f\u7528\u8bbe\u5907\u7684\u9ad8\u5ea6\u548c\u5bbd\u5ea6\u5b9a\u4e49viewport\u7684\u5927\u5c0f\uff0c\u4f7f\u60a8\u7684\u7f51\u9875\u9002\u5408\u6bcf\u4e2a\u8bbe\u5907\u7684\u5c4f\u5e55\uff0c\u4f46\u60a8\u7684\u56fe\u50cf\u7f29\u653e\uff0c\u4e3a\u4e86\u9002\u5e94\u4e0d\u540c\u7684\u5c4f\u5e55\u5bc6\u5ea6\u3002<\/p>\n
\u5b9a\u4e49viewport\u6bd4\u4f8b<\/p>\n
viewport\u7684\u7f29\u653e\u5b9a\u4e49\u9002\u7528\u4e8e\u7f51\u9875\u7684\u7f29\u653e\u7ea7\u522b\u3002Viewport\u7684\u5c5e\u6027\u5141\u8bb8\u60a8\u6307\u5b9a\u60a8\u7684\u7f51\u9875\u7f29\u653e\u5728\u4ee5\u4e0b\u8303\u56f4\uff1a<\/p>\n
initial-scale\u00a0\u521d\u59cb\u7f29\u653e
\n\u672c\u9875\u9762\u7684\u521d\u59cb\u7f29\u653e\u3002\u8be5\u503c\u662f\u4e00\u4e2a\u6d6e\u70b9\u578b\u6570\u503c,\u8868\u793a\u7f51\u9875\u7684\u5927\u5c0f\uff0c\u76f8\u5bf9\u4e0e\u5c4f\u5e55\u5c3a\u5bf8\u3002
\n\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u8bbe\u7f6e\u7684\u521d\u59cb\u7f29\u653e\u4e3a\u201c1.0\u201d\uff0c\u7136\u540e\u7f51\u9875\u663e\u793a\u7b26\u5408\u8be5\u51b3\u8bae\u7684\u76ee\u6807\u5bc6\u5ea6\u00a01\u52301\u3002\u5982\u679c\u8bbe\u7f6e\u4e3a\u201c2.0\u201d\uff0c\u7136\u540e\u5728\u9875\u9762\uff08\u653e\u5927\uff09\u653e\u5927\u4e862\u500d\u3002
\n\u9ed8\u8ba4\u7684\u521d\u59cb\u7f29\u653e\u8ba1\u7b97\uff0c\u4ee5\u9002\u5e94viewport\u5927\u5c0f\u7684\u7f51\u9875\u3002\u56e0\u4e3a\u9ed8\u8ba4viewport\u7684\u5bbd\u5ea6\u662f800\u50cf\u7d20\uff0c\u5982\u679c\u8be5\u8bbe\u5907\u7684\u5c4f\u5e55\u5206\u8fa8\u7387\u662f\u5c0f\u4e8e800\u50cf\u7d20\u5bbd\uff0c\u6700\u521d\u7684\u89c4\u6a21\u662f\u5c0f\u4e8e1.0\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u4ee5\u9002\u5e94\u5c4f\u5e55\u4e0a\u7684800\u4e2a\u50cf\u7d20\u5bbd\u7684\u9875\u9762\u3002<\/p>\n
minimum-scale\u00a0\u6700\u5c0f\u7f29\u653e
\n\u5141\u8bb8\u7684\u6700\u4f4e\u7f29\u653e\u3002\u8be5\u503c\u662f\u4e00\u4e2a\u6d6e\u70b9\u578b\uff0c\u8868\u793a\u503c\u6700\u4f4e\uff0c\u4e3a\u4f60\u7684\u7f51\u9875\u5927\u5c0f\u7684\u5c4f\u5e55\u5c3a\u5bf8\u76f8\u5bf9\u3002\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u8bbe\u7f6e\u8fd9\u4e2a\u201c1.0\u201d\uff0c\u7136\u540e\u5728\u9875\u9762\u4e0d\u80fd\u7f29\u5c0f\uff0c\u56e0\u4e3a\u6700\u5c0f\u5c3a\u5bf8\u4e0e\u76ee\u6807\u5bc6\u5ea6\u662f1\u52301\u00a0\u3002<\/p>\n
maximum-scale\u00a0\u6700\u5927\u7f29\u653e
\n\u89c4\u6a21\u6700\u5927\u5141\u8bb8\u9875\u9762\u3002\u503c\u662f\u4e00\u4e2a\u6d6e\u70b9\u6570\uff0c\u8868\u793a\u6700\u5927\u503c\u7684\u7f51\u9875\u5927\u5c0f\uff0c\u5c4f\u5e55\u5c3a\u5bf8\u76f8\u5bf9\u3002\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u8bbe\u7f6e\u8fd9\u4e2a\u201c2.0\u201d\uff0c\u7136\u540e\u5728\u9875\u9762\u4e0d\u80fd\u653e\u59272\u500d\u4ee5\u4e0a\u5927\u5c0f\u7684\u76ee\u6807\u3002<\/p>\n
user-scalable\u00a0\u7528\u6237\u53ef\u6269\u5c55\u6027
\n\u7528\u6237\u662f\u5426\u53ef\u4ee5\u66f4\u6539\u7f51\u9875\u7684\u7f29\u653e\uff08\u653e\u5927\u548c\u7f29\u5c0f\uff09\u3002\u8bbe\u7f6e\u4e3a\u00a0yes\u00a0\u5141\u8bb8\u7f29\u653e\u548cno\u7981\u6b62\u7f29\u653e\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u662f\u5141\u8bb8\u7684\u3002\u5982\u679c\u4f60\u8bbe\u7f6e\u4e3ano\uff0c\u7136\u540e\u6700\u5c0f\u7f29\u653e\u548c\u6700\u5927\u7f29\u653e\u7684\u503c\u5c06\u88ab\u5ffd\u7565\uff0c\u56e0\u4e3a\u65e0\u6cd5\u7f29\u653e\u3002
\n\u6240\u6709\u7f29\u653e\u7684\u503c\u5fc5\u987b\u662f0.01-10\u8303\u56f4\u5185\u3002
\n\u4f8b\u5982\uff1a<\/p>\n
<meta\u00a0name=”viewport”\u00a0content=”initial-scale=1.0″\u00a0\/>
\n\u6b64\u6570\u636e\u8bbe\u7f6e\u7684\u521d\u59cb\u7f29\u653e\u4e3a\u5168\u5c3a\u5bf8\uff0c\u76f8\u5bf9viewport\u7684\u76ee\u6807\u5bc6\u5ea6\u3002<\/p>\n
\u5b9a\u4e49viewport\u7684\u76ee\u6807\u5bc6\u5ea6<\/p>\n
\u8bbe \u5907\u7684\u5c4f\u5e55\u4e0a\u7684\u5bc6\u5ea6\u662f\u6839\u636e\u5c4f\u5e55\u7684\u5206\u8fa8\u7387\uff0c\u70b9\u6bcf\u82f1\u5bf8\uff08dpi\uff09\u7684\u6570\u91cf\u754c\u5b9a\u3002\u8fd9\u662f\u7531Android\u652f\u6301\u4e09\u79cd\u5c4f\u5bc6\u5ea6\uff1a\u4f4e\uff08LDPI\uff09\uff0c\u4e2d\u7b49\uff08MDPI\uff09\u7684\uff0c\u548c\u9ad8 \uff08MDPI\uff09\u7684\u3002\u5bc6\u5ea6\u4f4e\u7684\u5c4f\u5e55\u53ef\u51cf\u5c11\u6bcf\u82f1\u5bf8\u50cf\u7d20\u6570\uff0c\u800c\u9ad8\u5bc6\u5ea6\u7684\u5c4f\u5e55\u6bcf\u82f1\u5bf8\u7684\u50cf\u7d20\u8d8a\u591a\uff08\u4e2d\u7b49\u5bc6\u5ea6\u7684\u5c4f\u5e55\u76f8\u6bd4\uff09\u3002Android\u6d4f\u89c8\u5668\u7684WebView\u9ed8\u8ba4\u7684 \u662f\u4e2d\u5bc6\u5ea6\u5c4f\u5e55\u3002<\/p>\n
\u56e0 \u4e3a\u9ed8\u8ba4\u7684\u76ee\u6807\u5bc6\u5ea6\u662f\u4e2d\u7b49\u7684\uff0c\u5f53\u7528\u6237\u6709\u4f4e\u6216\u9ad8\u5bc6\u5ea6\u5c4f\uff0cAndroid\u6d4f\u89c8\u5668\u548c\u8bbe\u5907\u7684WebView\u7f29\u653e\u7f51\u9875\uff08\u6709\u6548\u653e\u5927\u7684\u9875\u9762\uff09\uff0c\u8ba9\u4ed6\u4eec\u5408\u9002\u7684\u663e\u793a\uff0c\u4ee5\u4e2d\u7b49\u5bc6 \u5ea6\u5927\u5c0f\u76f8\u5339\u914d\u5c4f\u5e55\u3002\u66f4\u5177\u4f53\u5730\u8bf4\uff0cAndroid\u6d4f\u89c8\u5668WebView\u4ee5\u7ea61.5\u500d\u7684\u503c\u7f29\u653e\u9ad8\u5bc6\u5ea6\u5c4f\uff08\u56e0\u4e3a\u5176\u5c4f\u5e55\u50cf\u7d20\u66f4\u5c0f\uff09\u548c\u4f4e\u5bc6\u5ea6\u5c4f\u5e55\u4e0a\u7684\u7f51\u9875\uff08\u7ea6 0.75\u500d\u7684\u7f29\u653e\uff0c\u56e0\u4e3a\u5b83\u7684\u5c4f\u5e55\u50cf\u7d20\u662f\u66f4\u5927\uff09\u3002<\/p>\n
\u7531 \u4e8e\u6b64\u9ed8\u8ba4\u7f29\u653e\uff0c\u6570\u5b571\uff0c2\u548c3\u663e\u793a\u5728\u76f8\u540c\u7684\u7269\u7406\u5c3a\u5bf8\uff0c\u4f8b\u5982\u7f51\u9875\u4e0a\u7684\u9ad8\uff0c\u4e2d\u5bc6\u5ea6\u8bbe\u5907\uff08\u9ad8\u5bc6\u5ea6\u7684\u8bbe\u5907\u663e\u793a\u7f51\u9875\u9ed8\u8ba4\u7684\u6bd4\u4f8b\u7cfb\u6570\u662f1.5\u500d\u5927\u4e8e\u5b9e\u9645\u50cf\u7d20\u5206\u8fa8\u7387\uff0c\u76f8 \u5339\u914d\u7684\u76ee\u6807\u5bc6\u5ea6\uff09\u3002\u53ef\u4ee5\u4f7f\u60a8\u7684\u56fe\u7247\u51fa\u73b0\u4e00\u4e9b\u4e0d\u597d\u7684\u6548\u679c\u3002\u4f8b\u5982\uff0c\u867d\u7136\u663e\u793a\u5728\u4e2d\u7b49\u548c\u9ad8\u5bc6\u5ea6\u7684\u8bbe\u5907\u7684\u5927\u5c0f\u76f8\u540c\uff0c\u9ad8\u5bc6\u5ea6\u7684\u8bbe\u5907\u4e0a\u7684\u56fe\u50cf\u51fa\u73b0\u6a21\u7cca\uff0c\u56e0\u4e3a\u88ab\u8bbe\u8ba1\u4e3a 320\u50cf\u7d20\u5bbd\uff0c\u4f46\u662f\u5728480\u50cf\u7d20\u663e\u793a\u3002<\/p>\n
\u60a8\u53ef\u4ee5\u66f4\u6539\u4e3a\u60a8\u7684\u7f51\u7ad9\u9875\u9762\u4f7f\u7528\u7684\u76ee\u6807\u5c4f\u5e55\u5bc6\u5ea6\u7684\u76ee\u6807densitydpi\u00a0viewport\u5c5e\u6027\u3002\u5b83\u63a5\u53d7\u4ee5\u4e0b\u503c\uff1a<\/p>\n
device-dpi
\n\u8bbe\u5907\u7684DPI\u00a0-\u4f7f\u7528\u4e3a\u76ee\u6807\u7684DPI\u8bbe\u5907\u7684\u672c\u5730DPI\u3002\u9ed8\u8ba4\u7f29\u653e\u4ece\u672a\u53d1\u751f\u3002<\/p>\n
high-dpi\u00a0\u00a0\u9ad8dpi\u00a0-\u4f7f\u7528\u4e3a\u76ee\u6807DPI\u00a0hdpi\u3002\u4e2d\u7b49\u548c\u4f4e\u5bc6\u5ea6\u5c4f\u5e55\u9002\u5f53\u7f29\u51cf\u3002<\/p>\n
medium-dpi\u00a0\u4e2dDPI\u00a0-\u4f7f\u7528\u4e3a\u76ee\u6807DPI\u00a0MDPI\u3002\u9ad8\u5bc6\u5ea6\u5c4f\u6269\u5c55\u548c\u4f4e\u5bc6\u5ea6\u5c4f\u5e55\u7f29\u5c0f\u3002\u8fd9\u662f\u9ed8\u8ba4\u7684\u76ee\u6807\u5bc6\u5ea6\u3002
\nlow-dpi\u00a0\u4f4eDPI\u00a0–\u00a0LDPI\u4f7f\u7528\u4e3a\u76ee\u6807DPI\u3002\u9002\u5f53\u6269\u5927\u4e2d\u7b49\u548c\u9ad8\u5bc6\u5ea6\u7684\u5c4f\u5e55\u3002<\/p>\n
<VALUE>\u00a0-\u6307\u5b9a\u4f7f\u7528\u4e3a\u76ee\u6807\u7684DPI\u00a0DPI\u503c\u3002\u503c\u5fc5\u987b\u572870-400\u8303\u56f4\u5185\u3002<\/p>\n
\u4f8b \u5982\uff0c\u8ba9\u7f51\u9875\u6839\u636e\u4e0d\u540c\u7684\u5c4f\u5e55\u5bc6\u5ea6\u7f29\u653e\uff0c\u4ee5\u9632\u6b62Android\u6d4f\u89c8\u5668\u548cWebView\u4e2d\u9ed8\u8ba4\u8bbe\u7f6e\uff0c\u8bbe\u5b9a\u7684\u76ee\u6807densitydpi\u00a0Viewport\u5c5e\u6027\u8bbe\u5907 dpi\u7684\u3002\u5f53\u4f60\u8fd9\u6837\u505a\uff0c\u5c06\u4e0d\u8fdb\u884c\u7f29\u653e\u9875\u9762\u3002\u76f8\u53cd\uff0c\u9875\u9762\u663e\u793a\u5728\u5f53\u524d\u5c4f\u5e55\u7684\u5bc6\u5ea6\u7684\u5927\u5c0f\u76f8\u5339\u914d\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u4f60\u4e5f\u5e94\u8be5\u5b9a\u4e49Viewport\u5bbd\u5ea6\u76f8\u5339\u914d\u7684\u8bbe\u5907\u5bbd \u5ea6\uff0c\u4f7f\u60a8\u7684\u7f51\u9875\u81ea\u7136\u9002\u5408\u5c4f\u5e55\u5927\u5c0f\u3002\u4f8b\u5982\uff1a<\/p>\n
<meta\u00a0name=”viewport”\u00a0content=”target-densitydpi=device-dpi,\u00a0width=device-width”\u00a0\/><\/p>\n
\u9488\u5bf9\u8bbe\u5907\u5bc6\u5ea6\u4e0eCSS<\/p>\n
Android\u6d4f\u89c8\u5668\u548cWebView\u4e2d\u652f\u6301\u7684CSS\u5a92\u4f53\u529f\u80fd\uff0c\u4f7f\u60a8\u53ef\u4ee5\u521b\u5efa\u7279\u5b9a\u7684\u5c4f\u5e55\u5bc6\u5ea6\u7684\u6837\u5f0fCSS\u00a0-WebKit\u7684\u8bbe\u5907\u50cf\u7d20\u6bd4\u5a92\u4f53\u529f\u80fd\u3002\u6b64\u529f\u80fd\u9002\u7528\u4e8e\u4f60\u7684\u4ef7\u503c\u5e94\u8be5\u662f\u65e0\u8bba\u662f\u201c0.75\u201d\uff0c\u201c1\u201d\u6216\u201c1.5\u201d\uff0c\u8868\u660e\u6837\u5f0f\u4e3a\u4f4e\u5bc6\u5ea6\uff0c\u4e2d\u5bc6\u5ea6\u6216\u9ad8\u5bc6\u5ea6\u5c4f\uff0c\u5206\u522b\u662f\u8bbe\u5907\u3002<\/p>\n
\u4f8b\u5982\uff0c\u4f60\u53ef\u4ee5\u4e3a\u6bcf\u4e2a\u5bc6\u5ea6\u521b\u5efa\u5355\u72ec\u7684\u6837\u5f0f\u8868\uff1a<\/p>\n
<link\u00a0rel=”stylesheet”\u00a0media=”screen\u00a0and\u00a0(-webkit-device-pixel-ratio:\u00a01.5)”\u00a0href=”hdpi.css”\u00a0\/>
\n<link\u00a0rel=”stylesheet”\u00a0media=”screen\u00a0and\u00a0(-webkit-device-pixel-ratio:\u00a01.0)”\u00a0href=”mdpi.css”\u00a0\/>
\n<link\u00a0rel=”stylesheet”\u00a0media=”screen\u00a0and\u00a0(-webkit-device-pixel-ratio:\u00a00.75)”\u00a0href=”ldpi.css”\u00a0\/><\/p>\n
\u6216\u6307\u5b9a\u4e00\u4e2a\u6837\u5f0f\u8868\u4e2d\u7684\u4e0d\u540c\u98ce\u683c\uff1a<\/p>\n
#header\u00a0{
\nbackground:url(medium-density-image.png);
\n}<\/p>\n
@media\u00a0screen\u00a0and\u00a0(-webkit-device-pixel-ratio:\u00a01.5)\u00a0{
\n\/*\u00a0CSS\u00a0for\u00a0high-density\u00a0screens\u00a0*\/
\n#header\u00a0{
\nbackground:url(high-density-image.png);
\n}
\n}<\/p>\n
@media\u00a0screen\u00a0and\u00a0(-webkit-device-pixel-ratio:\u00a00.75)\u00a0{
\n\/*\u00a0CSS\u00a0for\u00a0low-density\u00a0screens\u00a0*\/
\n#header\u00a0{
\nbackground:url(low-density-image.png);
\n}
\n}<\/p>\n
\u6ce8\uff1a\uff03\u5934\u4e3a\u9ed8\u8ba4\u6837\u5f0f,\u9002\u7528\u4e8e\u5927\u4e8e2.0\uff0c\u4ee5\u652f\u6301\u8bbe\u5907\u8fd0\u884c\u7684Android\u7248\u672c,\u00a0\u5c11\u7684\u4e2d\u7b49\u5bc6\u5ea6\u8bbe\u5907\u8bbe\u8ba1\u7684\u6837\u5f0f\uff0c\u4e0d\u652f\u6301WebKit\u7684\u8bbe\u5907\u50cf\u7d20\u6bd4\u5a92\u4f53\u529f\u80fd\u3002<\/p>\n
\u53d6\u51b3\u4e8e\u4f60\u5982\u4f55\u5b9a\u4e49\u4f60\u7684viewport\u5c5e\u6027\u7684\u7c7b\u578b\u98ce\u683c\uff0c\u4f60\u53ef\u80fd\u9700\u8981\u6839\u636e\u5c4f\u5e55\u7684\u5bc6\u5ea6\u8c03\u6574\u3002\u63d0\u4f9b\u5b8c\u5168\u5b9a\u5236\u7684\u6837\u5f0f\uff0c\u4e3a\u6bcf\u4e2a\u53d7\u652f\u6301\u7684\u5bc6\u5ea6\u4fee\u6539\u60a8\u7684\u7f51\u9875\uff0c\u4f60\u5e94\u8be5\u8bbe\u7f6e\u4f60\u7684viewpor\u5c5e\u6027\uff0c\u4f7fviewpor\u7684\u5bbd\u5ea6\u548c\u5bc6\u5ea6\u5339\u914d\u8bbe\u5907\u3002
\n\u8fd9\u5c31\u662f\uff1a<\/p>\n
<meta\u00a0name=”viewport”\u00a0content=”target-densitydpi=device-dpi,\u00a0width=device-width”\u00a0\/><\/p>\n
\u8fd9\u6837\u4e00\u6765\uff0cAndroid\u6d4f\u89c8\u5668\u548cWebView\u4e2d\u4e0d\u6267\u884c\u60a8\u7684\u7f51\u9875\u7f29\u653e\u548cviewport\u7684\u5bbd\u5ea6\u76f8\u5339\u914d\u7684\u5c4f\u5e55\u5bbd\u5ea6\u5b8c\u5168\u76f8\u540c\u3002\u7136\u800c\uff0c\u901a\u8fc7\u6dfb\u52a0\u4e00\u4e9b\u81ea\u5b9a\u4e49\u7684CSS\u4f7f\u7528\u7684WebKit\u7684\u8bbe\u5907\u50cf\u7d20\u6bd4\u5a92\u4f53\u529f\u80fd\uff0c\u53ef\u4ee5\u5e94\u7528\u4e0d\u540c\u7684\u6837\u5f0f\u3002<\/p>\n
\u9488\u5bf9\u8bbe\u5907\u5bc6\u5ea6\u4e0eJavaScript<\/p>\n
Android \u6d4f\u89c8\u5668\u548cWebView\u4e2d\u652f\u6301\u4e00\u4e2aDOM\u5c5e\u6027\uff0c\u4f7f\u60a8\u53ef\u4ee5\u67e5\u8be2\u5f53\u524d\u8bbe\u5907\u7684\u5bc6\u5ea6window.devicePixelRatio\u00a0DOM\u5c5e\u6027\u3002\u8fd9\u4e2a\u5c5e\u6027\u7684\u503c\u6307 \u5b9a\u5f53\u524d\u8bbe\u5907\u4f7f\u7528\u7684\u6bd4\u4f8b\u56e0\u5b50\u3002\u4f8b\u5982\uff0c\u5982\u679c\u503cwindow.devicePixelRatio\u662f\u201c1.0\u201d\uff0c\u5219\u8be5\u8bbe\u5907\u88ab\u8ba4\u4e3a\u662f\u4e2d\u7b49\u5bc6\u5ea6\u7684\u8bbe\u5907\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5e94 \u7528\uff0c\u5982\u679c\u503c\u662f\u201c1.5\u201d\uff0c\u5219\u8be5\u8bbe\u5907\u88ab\u8ba4\u4e3a\u662f\u4e00\u79cd\u9ad8\u5bc6\u5ea6\u8bbe\u5907\u548c\u9875\u9762\u7f29\u653e\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u76841.5\u500d;\u5982\u679c\u503c\u662f\u201c0.75\u201d\uff0c\u5219\u8be5\u8bbe\u5907\u88ab\u8ba4\u4e3a\u662f\u4e00\u4e2a\u4f4e\u5bc6\u5ea6\u8bbe\u5907\u548c\u9875\u9762 \u7f29\u653e\u9ed8\u8ba4\u76840.75\u500d\u3002\u5f53\u7136\u4e86\uff0cAndroid\u6d4f\u89c8\u5668\u548c\u7f29\u653e\u7684WebView\u00a0APPLY\u662f\u7f51\u9875\u7684\u76ee\u6807\u5bc6\u5ea6\u4e3a-\u7684\u6709\u5173\u8282\u4e2d\u63cf\u8ff0\u7684\u57fa\u7840\u5b9a\u4e49\u7684\u89c6\u53e3\u76ee\u6807\u5bc6\u5ea6\uff0c \u9ed8\u8ba4\u7684\u76ee\u6807\u662f\u4e2d\u7b49\u5bc6\u5ea6\u7684\uff0c\u4f46\u4f60\u53ef\u4ee5\u6539\u53d8\u7684\u76ee\u6807\u6765\u5f71\u54cd\u5982\u4f55\u60a8\u7684\u7f51\u9875\u7f29\u653e\u4e3a\u4e0d\u540c\u7684\u5c4f\u5e55\u5bc6\u5ea6\u3002<\/p>\n
\u4f8b\u5982\uff0c\u8fd9\u91cc\u662f\u4f60\u5982\u4f55\u7528JavaScript\u53ef\u4ee5\u67e5\u8be2\u8bbe\u5907\u5bc6\u5ea6\uff1a<\/p>\n
if\u00a0(window.devicePixelRatio\u00a0==\u00a01.5)\u00a0{
\nalert(“This\u00a0is\u00a0a\u00a0high-density\u00a0screen”);
\n}\u00a0else\u00a0if\u00a0(window.devicePixelRatio\u00a0==\u00a00.75)\u00a0{
\nalert(“This\u00a0is\u00a0a\u00a0low-density\u00a0screen”);
\n}<\/p>\n
Web\u5e94\u7528\u7a0b\u5e8f\u7684\u6700\u4f73\u5b9e\u8df5<\/p>\n
\u5f00\u53d1\u7f51\u9875\u548c\u79fb\u52a8\u8bbe\u5907\u7684Web\u5e94\u7528\u7a0b\u5e8f\u63d0\u51fa\u4e86\u4e0d\u540c\u7684\u6311\u6218\uff0c\u53d1\u5c55\u4e3a\u5178\u578b\u7684\u684c\u9762\u6d4f\u89c8\u5668\u7684\u7f51\u9875\u3002\u4e3a\u4e86\u5e2e\u52a9\u4f60\u5f00\u59cb\uff0c\u4e0b\u9762\u662f\u4e00\u4e2a\u505a\u6cd5\uff0c\u4f60\u5e94\u8be5\u9075\u5faa\u4ee5Android\u548c\u5176\u4ed6\u79fb\u52a8\u8bbe\u5907\u63d0\u4f9b\u6700\u6709\u6548\u7684Web\u5e94\u7528\u7a0b\u5e8f\u7684\u5217\u8868\u3002<\/p>\n
1.\u00a0\u79fb\u52a8\u8bbe\u5907\u91cd\u5b9a\u5411\u5230\u4e00\u4e2a\u4e13\u95e8\u7684\u7f51\u7ad9\u7684\u79fb\u52a8\u7248\u672c
\n\u6709 \u51e0\u79cd\u65b9\u6cd5\u53ef\u4ee5\u8bf7\u6c42\u91cd\u5b9a\u5411\u5230\u60a8\u7684\u7f51\u7ad9\u7684\u79fb\u52a8\u7248\u672c\uff0c\u4f7f\u7528\u670d\u52a1\u5668\u7aef\u91cd\u5b9a\u5411\u3002\u5927\u591a\u6570\u60c5\u51b5\u4e0b\uff0c\u8fd9\u662f\u901a\u8fc7\u7f51\u9875\u6d4f\u89c8\u5668\u63d0\u4f9b\u7684\u7528\u6237\u4ee3\u7406\u5b57\u7b26\u4e32\u201c\u55c5\u201d\u3002\u4ee5\u786e\u5b9a\u662f\u5426\u4e3a\u60a8\u7f51\u7ad9\u7684 \u79fb\u52a8\u7248\u672c\uff0c\u4f60\u5e94\u8be5\u7b80\u5355\u5730\u770b\u4e3a\u201c\u79fb\u52a8\u201d\u7528\u6237\u4ee3\u7406\u5b57\u7b26\u4e32\uff0c\u5339\u914d\u7684\u591a\u79cd\u79fb\u52a8\u8bbe\u5907\u3002\u5982\u679c\u6709\u5fc5\u8981\uff0c\u8fd8\u53ef\u4ee5\u8bc6\u522b\u7279\u5b9a\u7684\u64cd\u4f5c\u7cfb\u7edf\u4e2d\u7684\u7528\u6237\u4ee3\u7406\u5b57\u7b26\u4e32\uff08\u5982\u201c\u7684 Android\u00a02.1\u201d\uff09\u3002<\/p>\n
\u6ce8\uff1a\u5927\u5c4f\u5e55Android\u7684\u4f9b\u7535\u8bbe\u5907\uff0c\u5e94\u9001\u8fbe\u5168\u5c3a\u5bf8\u7684\u7f51\u7ad9\uff08\u5982\u7247\u5242\uff09\uff0c\u4e0d\u5305\u62ec\u201c\u79fb\u52a8\u201d\u7528\u6237\u4ee3\u7406\u5b57\u7b26\u4e32\uff0c\u800c\u7528\u6237\u4ee3\u7406\u5b57\u7b26\u4e32\u7684\u5176\u4f59\u90e8\u5206\u5927\u591a\u662f\u76f8\u540c\u7684\u3002\u6b63\u56e0\u4e3a\u5982\u6b64\uff0c\u8fd9\u4e00\u70b9\u5f88\u91cd\u8981\uff0c\u60a8\u63d0\u4f9b\u57fa\u4e8e\u201c\u79fb\u52a8\u201d\u7684\u7528\u6237\u4ee3\u7406\u5b57\u7b26\u4e32\u662f\u5426\u5b58\u5728\u60a8\u7684\u7f51\u7ad9\u7684\u79fb\u52a8\u7248\u672c\u3002<\/p>\n
2.\u00a0\u8fd9\u662f\u9002\u7528\u4e8e\u79fb\u52a8\u8bbe\u5907\u7684\uff0c\u4f7f\u7528\u4e00\u4e2a\u6709\u6548\u7684\u6807\u8bb0\u7684DOCTYPE
\n\u7528\u4e8e\u79fb\u52a8\u7f51\u7ad9\u662f\u6700\u5e38\u89c1\u7684\u6807\u8bb0\u8bed\u8a00XHTML\u57fa\u7840\u3002\u8fd9\u4e2a\u6807\u51c6\uff0c\u786e\u4fdd\u60a8\u7684\u7f51\u7ad9\uff0c\u6700\u9002\u5408\u79fb\u52a8\u8bbe\u5907\u4e0a\u7684\u7279\u5b9a\u6807\u8bb0\u3002\u4f8b\u5982\uff0c\u5b83\u4e0d\u5141\u8bb8HTML\u6846\u67b6\u6216\u5d4c\u5957\u8868\uff0c\u79fb\u52a8\u8bbe\u5907\u4e0a\u6267\u884c\u4e0d\u4f73\u3002\u968f\u7740\u7684DOCTYPE\uff0c\u786e\u4fdd\u7533\u62a5\u6587\u4ef6\uff08\u5982UTF-8\uff09\u9002\u5f53\u7684\u5b57\u7b26\u7f16\u7801\u3002
\n\u4f8b\u5982\uff1a
\n<?xml\u00a0version=”1.0″\u00a0encoding=”UTF-8″?>
\n<!DOCTYPE\u00a0html\u00a0PUBLIC\u00a0“-\/\/W3C\/\/DTD\u00a0XHTML\u00a0Basic\u00a01.1\/\/EN”
\n“http:\/\/www.w3.org\/TR\/xhtml-basic\/xhtml-basic11.dtd”><\/p>\n
3.\u00a0\u4f7f\u7528viewport\u7684\u5143\u6570\u636e\uff0c\u9002\u5f53\u5730\u8c03\u6574\u4f60\u7684\u7f51\u9875
\n\u5728\u60a8\u7684\u6587\u4ef6<HEAD>\uff0c\u4f60\u5e94\u8be5\u63d0\u4f9b\u7684\u5143\u6570\u636e\uff0c\u6307\u5b9a\u60a8\u5e0c\u671b\u5982\u4f55\u6d4f\u89c8\u5668\u7684\u89c6\u53e3\uff0c\u4ee5\u4f7f\u60a8\u7684\u7f51\u9875\u3002\u4f8b\u5982\uff0c\u4f60\u7684\u89c6\u53e3\u7684\u5143\u6570\u636e\u53ef\u4ee5\u6307\u5b9a\u9ad8\u5ea6\u548c\u5bbd\u5ea6\u4e3a\u6d4f\u89c8\u5668\u7684\u89c6\u53e3\uff0c\u6700\u521d\u7684\u7f51\u9875\u7684\u89c4\u6a21\u548c\u76ee\u6807\u5c4f\u5e55\u5bc6\u5ea6\u3002
\n\u4f8b\u5982\uff1a
\n<meta\u00a0name=”viewport”\u00a0content=”width=device-width,\u00a0initial-scale=1.0,\u00a0user-scalable=no”><\/p>\n
\u5982\u9700\u66f4\u591a\u6709\u5173\u5982\u4f55\u4f7f\u7528Android\u7684\u4f9b\u7535\u8bbe\u5907\u7684\u89c6\u53e3\u7684\u5143\u6570\u636e\u7684\u8be6\u7ec6\u4fe1\u606f\uff0c\u8bf7\u9605\u8bfb\u9488\u5bf9Web\u5e94\u7528\u7a0b\u5e8f\u7684\u5c4f\u5e55\u3002<\/p>\n
4.\u00a0\u907f\u514d\u591a\u4e2a\u6587\u4ef6\u8bf7\u6c42
\n\u56e0 \u4e3a\u79fb\u52a8\u8bbe\u5907\u901a\u5e38\u6709\u4e00\u4e2a\u8fde\u63a5\u901f\u5ea6\u8fdc\u8fdc\u8d85\u8fc7\u4e00\u53f0\u53f0\u5f0f\u7535\u8111\u6162\uff0c\u4f60\u5e94\u8be5\u8ba9\u4f60\u7684\u7f51\u9875\u5c3d\u53ef\u80fd\u5feb\u7684\u8d1f\u8f7d\u3002\u52a0\u5feb\u6b65\u4f10\u7684\u65b9\u6cd5\u4e4b\u4e00\u662f\u4e3a\u4e86\u907f\u514d\u52a0\u8f7d\u6837\u5f0f\u548c\u811a\u672c\u6587\u4ef6\uff0c\u5982\u989d\u5916\u6587 \u4ef6<HEAD>\u7684\u3002\u76f8\u53cd\uff0c\u5728<head>\u76f4\u63a5\u63d0\u4f9b\u4f60\u7684CSS\u548cJavaScript\uff08\u6216\u5728\u7684<body>\u5e74\u5e95\uff0c\u811a \u672c\uff0c\u4f60\u4e0d\u9700\u8981\uff0c\u76f4\u5230\u9875\u9762\u52a0\u8f7d\uff09\u3002\u53e6\u5916\uff0c\u4f60\u5e94\u8be5\u901a\u8fc7\u538b\u7f29\u4ed6\u4eec\u559c\u6b22\u7684\u5de5\u5177\u4f18\u5316\u60a8\u7684\u6587\u4ef6\u7684\u5927\u5c0f\u548c\u901f\u5ea6\u7f29\u5c0f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
1.\u5b9e\u73b0\u65b9\u5f0f \u57fa\u672c\u4e0a\u6709\u4e24\u79cd\u65b9\u5f0f\u5b9e\u73b0\u5728android\u4e0a\u5f00\u53d1web\u7a0b\u5e8f\uff0c\u4e00\u79cd\u901a\u8fc7\u4f7f\u7528Android\u00a0SDK\u5f00\u53d1ap […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-140","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/posts\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=140"}],"version-history":[{"count":1,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":484,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=\/wp\/v2\/posts\/140\/revisions\/484"}],"wp:attachment":[{"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.siediyer.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}