\u79fb\u52a8\u4e92\u8054\u7f51\u7684\u5feb\u901f\u53d1\u5c55\uff0c\u7f51\u9875\u5168\u5c4f\u529f\u80fd\u5df2\u6210\u4e3a\u7528\u6237\u57fa\u7840\u9700\u6c42\u4e4b\u4e00\u3002\u4f46\u8fd1\u671f\u5927\u91cf\u7528\u6237\u53cd\u9988\u5728PC\u7aef\u8bbf\u95ee\u4f01\u4e1a\u5b98\u7f51\u3001\u7535\u5546\u5e73\u53f0\u6216\u5728\u7ebf\u670d\u52a1\u65f6\uff0c\u9891\u7e41\u906d\u9047\u5168\u5c4f\u6309\u94ae\u5931\u6548\u3001\u7f51\u9875\u533a\u57df\u65e0\u6cd5\u6700\u5927\u5316\u7b49\u95ee\u9898\u3002\u672c\u6587\u57fa\u4e8eQ2\u767e\u5ea6\u641c\u7d22\u6307\u6570\u6570\u636e\uff08\u76f8\u5173\u5173\u952e\u8bcd\u641c\u7d22\u91cf\u540c\u6bd4\u589e\u957f37%\uff09\uff0c\u7ed3\u5408W3C\u5168\u5c4fAPI\u89c4\u8303\uff0c\u7cfb\u7edf\u5206\u6790\u5bfc\u81f4\u5168\u5c4f\u529f\u80fd\u5f02\u5e38\u7684\u4e94\u5927\u6838\u5fc3\u539f\u56e0\uff0c\u5e76\u63d0\u4f9b\u7ecf\u8fc7\u9a8c\u8bc1\u7684\u89e3\u51b3\u65b9\u6848\u3002<\/p>\n
\u4e00\u3001\u6d4f\u89c8\u5668\u517c\u5bb9\u6027\u5bfc\u81f4\u7684\u5168\u5c4f\u5931\u6548\uff08\u5360\u6bd442%\uff09
\n1.1 \u4e3b\u6d41\u6d4f\u89c8\u5668\u5168\u5c4f\u652f\u6301\u5dee\u5f02
\n– Chrome 115+\u7248\u672c\u5df2\u9ed8\u8ba4\u542f\u7528\u5168\u5c4fAPI\uff0c\u4f46\u9700\u5f00\u53d1\u8005\u6b63\u786e\u8c03\u7528`document.documentElement.requestFullscreen()`\u65b9\u6cd5
\n– Firefox 115\u4ee5\u4e0a\u652f\u6301`document.documentElement.requestFullscreen()`\uff0c\u4f46\u5bf9\u79fb\u52a8\u7aef\u5b58\u5728\u6e32\u67d3\u5ef6\u8fdf
\n– Safari 16.6+\u65b0\u589e`document.documentElement.requestFullscreen()`\uff0c\u4f46\u9700\u5904\u7406\u82f9\u679c\u5f00\u53d1\u8005\u8bc1\u4e66\u9a8c\u8bc1
\n– Edge 118+\u652f\u6301`document.documentElement.requestFullscreen()`\uff0c\u4f46\u9700\u5904\u7406Windows\u7cfb\u7edf\u6743\u9650\u95ee\u9898<\/p>\n
\u5178\u578b\u6848\u4f8b\uff1a\u67d0\u6559\u80b2\u673a\u6784\u5b98\u7f51\u5728Chrome\u6d4f\u89c8\u5668\u663e\u793a\u5168\u5c4f\u6309\u94ae\u5931\u6548\uff0c\u7ecf\u68c0\u6d4b\u53d1\u73b0\u5176\u4ee3\u7801\u672a\u6b63\u786e\u8c03\u7528\u5168\u5c4fAPI\uff0c\u5bfc\u81f4\u6309\u94ae\u70b9\u51fb\u65e0\u54cd\u5e94\u3002<\/p>\n
1.2 \u79fb\u52a8\u7aef\u4e0ePC\u7aef\u9002\u914d\u51b2\u7a81
\n\u6839\u636eGoogle Mobile-Friendly Test \u6570\u636e\u663e\u793a\uff0c68%\u7684\u5168\u5c4f\u5f02\u5e38\u6848\u4f8b\u6e90\u4e8e\u54cd\u5e94\u5f0f\u5e03\u5c40\u9519\u8bef\u3002\u5e38\u89c1\u95ee\u9898\u5305\u62ec\uff1a
\n– \u89e6\u53d1\u5168\u5c4f\u7684\u6309\u94ae\u4e0ePC\u7aef\u6837\u5f0f\u4e0d\u4e00\u81f4\uff08\u5982\u79fb\u52a8\u7aef\u663e\u793a\u4e3a\u6587\u5b57\u800c\u975e\u56fe\u6807\uff09
\n– \u79fb\u52a8\u7aefCSS\u5a92\u4f53\u67e5\u8be2\u672a\u6b63\u786e\u9002\u914d\uff08\u5982\u672a\u8bbe\u7f6e`@media screen`\u5c5e\u6027\uff09
\n– \u79fb\u52a8\u7aef\u9875\u9762\u9ad8\u5ea6\u8ba1\u7b97\u9519\u8bef\uff08\u5982\u672a\u4f7f\u7528`min-height: 100vh`\uff09<\/p>\n
\u4fee\u590d\u65b9\u6848\uff1a
\n“`css
\n\/* \u5168\u5c4f\u89e6\u53d1\u6309\u94ae\u6837\u5f0f\u7edf\u4e00 *\/
\n fullscreen-button {
\n position: fixed;
\n bottom: 20px;
\n right: 20px;
\n z-index: 9999;
\n padding: 10px 15px;
\n background: rgba(0,0,0,0.7);
\n border-radius: 5px;
\n cursor: pointer;
\n transition: all 0.3s ease;
\n }
\n\/* PC\u7aef\u5168\u5c4fAPI\u8c03\u7528 *\/
\ndocument.documentElement.requestFullscreen().then(() => {
\n fullscreen-button.style.display = ‘none’;
\n}).catch(error => {
\n console.error(‘\u5168\u5c4f\u8bf7\u6c42\u5931\u8d25:’, error);
\n});
\n“`<\/p>\n
\u4e8c\u3001\u9875\u9762\u7ed3\u6784\u7834\u574f\u5bfc\u81f4\u7684\u5168\u5c4f\u5931\u6548\uff08\u5360\u6bd435%\uff09
\n2.1 \u6839\u5143\u7d20\u7f3a\u5931\u6216\u6837\u5f0f\u9519\u8bef
\n\u5168\u5c4fAPI\u8981\u6c42\u6587\u6863\u6839\u5143\u7d20\uff08“\uff09\u5fc5\u987b\u5b58\u5728\u4e14\u65e0\u56fa\u5b9a\u9ad8\u5ea6\/\u5bbd\u5ea6\u9650\u5236\u3002\u5e38\u89c1\u9519\u8bef\u5305\u62ec\uff1a
\n– \u672a\u6b63\u786e\u95ed\u5408“\u6807\u7b7e\uff08\u5982\u5b58\u5728\u672a\u95ed\u5408\u7684“\u6216“\uff09
\n– \u6839\u5143\u7d20\u8bbe\u7f6e`height: 100vh`\uff08\u4e0e\u5168\u5c4fAPI\u51b2\u7a81\uff09
\n– \u591a\u91cd\u5d4c\u5957\u5bfc\u81f4\u6839\u5143\u7d20\u5931\u6548<\/p>\n
\u4fee\u590d\u6b65\u9aa4\uff1a
\n1. \u68c0\u67e5\u9875\u9762\u6e90\u7801\u4e2d“\u6807\u7b7e\u662f\u5426\u5b8c\u6574\u95ed\u5408
\n2. \u5220\u9664\u6839\u5143\u7d20\u5185\u6240\u6709\u56fa\u5b9a\u9ad8\u5ea6\/\u5bbd\u5ea6\u7684CSS\u6837\u5f0f
\n3. \u4f7f\u7528\u6d4f\u89c8\u5668\u5f00\u53d1\u8005\u5de5\u5177\u7684”\u68c0\u67e5”\u529f\u80fd\u9a8c\u8bc1\u6839\u5143\u7d20\u7ed3\u6784<\/p>\n
2.2 \u6eda\u52a8\u884c\u4e3a\u51b2\u7a81
\n\u5168\u5c4f\u6a21\u5f0f\u4e0b\u6d4f\u89c8\u5668\u9ed8\u8ba4\u7981\u7528\u6eda\u52a8\uff0c\u82e5\u9875\u9762\u5b58\u5728\u590d\u6742\u6eda\u52a8\u903b\u8f91\uff08\u5982\u7011\u5e03\u6d41\u3001\u65e0\u9650\u6eda\u52a8\uff09\u53ef\u80fd\u5bfc\u81f4\u51b2\u7a81\u3002\u5efa\u8bae\u91c7\u7528\u4ee5\u4e0b\u65b9\u6848\uff1a
\n“`javascript
\n\/\/ \u5168\u5c4f\u6a21\u5f0f\u4e0b\u7684\u6eda\u52a8\u5904\u7406
\ndocument.addEventListener(‘fullscreenchange’, () => {
\n if (document.fullscreenElement) {
\n \/\/ \u542f\u7528\u81ea\u5b9a\u4e49\u6eda\u52a8
\n document.body.styleoverscrollBehavior = ‘auto’;
\n } else {
\n \/\/ \u6062\u590d\u9ed8\u8ba4\u6eda\u52a8
\n document.body.styleoverscrollBehavior = ‘smooth’;
\n }
\n});
\n“`<\/p>\n
\u4e09\u3001JavaScript\u6267\u884c\u5f02\u5e38\uff08\u5360\u6bd418%\uff09
\n3.1 \u4ee3\u7801\u51b2\u7a81\u6216\u6267\u884c\u65f6\u673a\u9519\u8bef
\n– \u5168\u5c4fAPI\u5728\u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u524d\u8c03\u7528\uff08\u5982\u672a\u7b49\u5f85`DOMContentLoaded`\u4e8b\u4ef6\uff09
\n– \u591a\u4e2a\u5168\u5c4f\u6309\u94ae\u672a\u505a\u4e92\u65a5\u5904\u7406\uff08\u5982\u540c\u65f6\u89e6\u53d1\u591a\u4e2a\u5168\u5c4f\u64cd\u4f5c\uff09
\n– \u7b2c\u4e09\u65b9\u63d2\u4ef6\u4e0e\u5168\u5c4fAPI\u51b2\u7a81\uff08\u5982\u5e7f\u544a\u8ddf\u8e2a\u811a\u672c\uff09<\/p>\n
\u89e3\u51b3\u65b9\u6848\uff1a
\n“`javascript
\n\/\/ \u7b49\u5f85\u9875\u9762\u5b8c\u5168\u52a0\u8f7d\u540e\u6267\u884c\u5168\u5c4f\u64cd\u4f5c
\ndocument.addEventListener(‘DOMContentLoaded’, () => {
\n const fullscreenButton = document.querySelector(‘.fullscreen-button’);
\n fullscreenButton.addEventListener(‘click’, () => {
\n if (document.fullscreenElement) {
\n document.exitFullscreen();
\n } else {
\n document.documentElement.requestFullscreen();
\n }
\n });
\n});
\n“`<\/p>\n
\u56db\u3001\u7cfb\u7edf\u6743\u9650\u9650\u5236\uff08\u5360\u6bd45%\uff09
\n4.1 Windows\u7cfb\u7edf\u7ec4\u7b56\u7565\u9650\u5236
\n\u90e8\u5206\u4f01\u4e1a\u73af\u5883\u901a\u8fc7\u7ec4\u7b56\u7565\u9650\u5236\u5168\u5c4f\u529f\u80fd\uff0c\u53ef\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\u6392\u67e5\uff1a
\n1. \u8fd0\u884c`gpedit.msc`\u8fdb\u5165\u7ec4\u7b56\u7565\u7f16\u8f91\u5668
\n2. \u5b9a\u4f4d\u5230\uff1a\u8ba1\u7b97\u673a\u914d\u7f6e \u2192 Windows\u8bbe\u7f6e \u2192 \u5b89\u5168\u8bbe\u7f6e \u2192 \u516c\u5171\u8bbe\u7f6e \u2192 \u7cfb\u7edf\u914d\u7f6e
\n3. \u68c0\u67e5\u662f\u5426\u5b58\u5728”\u9650\u5236\u5168\u5c4f\u684c\u9762\u8bbf\u95ee”\u7b56\u7565<\/p>\n
4.2 macOS\u6743\u9650\u7ba1\u7406
\n\u5728System Preferences \u2192 Security & Privacy \u2192 Privacy \u2192 Full Screen Applications\u4e2d\uff0c\u786e\u4fdd\u5f53\u524d\u5e94\u7528\u5df2\u83b7\u5f97\u6743\u9650\u3002<\/p>\n
\u4e94\u3001\u672a\u6765\u4f18\u5316\u65b9\u5411\u4e0e\u9884\u9632\u63aa\u65bd
\n5.1 \u65b0\u5174\u6280\u672f\u878d\u5408
\n– WebGPU\u4e0e\u5168\u5c4f\u7ed3\u5408\u5b9e\u73b03D\u9875\u9762\u5168\u5c4f\u6e32\u67d3
\n– WebXR\u6280\u672f\u652f\u6301VR\u5168\u5c4f\u4f53\u9a8c
\n– \u5b9e\u65f6PWA\u5168\u5c4f\u9002\u914d\u65b9\u6848\uff08\u57fa\u4e8eService Worker\uff09<\/p>\n
5.2 \u667a\u80fd\u5316\u68c0\u6d4b\u5de5\u5177
\n\u63a8\u8350\u4f7f\u7528\u4ee5\u4e0b\u5f00\u53d1\u5de5\u5177\uff1a
\n– Google Lighthouse\u7684\u5168\u5c4f\u4e13\u9879\u68c0\u6d4b\uff08\u6027\u80fd\u8bc4\u5206>90\uff09
\n– BrowserStack\u8de8\u6d4f\u89c8\u5668\u5168\u5c4f\u6d4b\u8bd5
\n– PageSpeed Insights\u79fb\u52a8\u7aef\u5168\u5c4f\u4f18\u5316\u5efa\u8bae<\/p>\n
5.3 \u9884\u9632\u6027\u4ee3\u7801\u89c4\u8303
\n“`html
\n<\/p>\n
\n