常用視口

viewport 是用戶網頁的可視區域。

viewport 翻譯為中文可以叫做"視區"。

手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），用戶可以通過平移和縮放來看網頁的不同部分。

可能的值：

• width---viewport的寬度 可能的值 像素| device-width
• height – viewport的高度---可能的值 像素| device-height
• initial-scale – 初始的縮放比例
• minimum-scale – 允許用戶縮放到的最小比例
• maximum-scale – 允許用戶縮放到的最大比例
• user-scalable – 用戶是否可以手動縮放---可能的值yes||no或者1||0
• target-densitydpi--- [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

此屬性為文檔兼容模式聲明，表示如果在IE瀏覽器下則使用最新的標準渲染當前文檔

• X-UA-Compatible是自從IE8新加的一個設置，對於IE8以下的瀏覽器是不識別的。
• IE=edge 告訴IE,IE8以後的版本使用最新版本的引擎渲染網頁;
• chrome=1安裝了GCF後可以激活Chrome Frame.

emmet快捷鍵：meta:compat

最後說下IE瀏覽器，因為IE9以下不支持media Queries的，使用時需要引用一個Media Query Javascript解決，如下

1. <!–[if lt IE 9]>
2. <script src=”../../css3-mediaqueries.js”></script>
3. <![endif]–>

移動端自適應及設置初始rem

1. (function() {
2. function resetFontSize() {
3. var docElt = window.document.documentElement;
4. docElt.style.fontSize = docElt.clientWidth / 375 * 100 + ‘px‘;
5. }
6. // 在PC上縮小顯示（除被iframe外）
7. if (window.top === window.self && /\b(Windows\sNT|Macintosh)\b/.test(window.navigator.userAgent)) {
9. window.document.write(
10. ‘<style>‘ +
11. ‘html { font-size: 120px!important; }‘ +
12. ‘body { width: 3.75rem; margin-left: auto !important; margin-right: auto !important; }‘ +
13. ‘.fixed-full-width { width: 3.75rem; right: 0; margin-left: auto; margin-right: auto; }‘ +
14. ‘</style>‘
15. );
16. return;
17. }
18. // 自適應縮放
19. window.addEventListener(‘resize‘, resetFontSize, false);
20. resetFontSize();
21. })();

寫網站經常需要用到的代碼匯總