判斷android、IOS 轉頁面
JavaScript 判斷為 android、IOS 系統行動裝置，自動跳轉到手機版網站，HTML 裡的 <head></head> 這段中間貼入下面程式碼。
1 2 3 4 5 | <script type="text/javascript"> if(navigator.userAgent.match(/Android|iPhone|iPad/i)) { window.location = '手機版網址'; } </script> |
特定斷點的樣式
min-width 、 max-width 設定的是「瀏覽器」的寬度。
1 2 3 4 5 6 | @media screen and (min-width: 1200px) { // 如果使用者之視窗寬度 <= 1200px，將會再載入這裡的 CSS。 } @media screen and (min-width: 768px) and (max-width: 979px) { // 如果使用者之視窗寬度介於 768px 到 979px，將會再載入這裡的 CSS。 } |
min-device-width、 max-device-width，看到 device 顧名思義就是設定「行動裝置」的寬度。
1 2 3 4 5 6 | @media screen and (max-width: 767px) { // 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。 } @media screen and (max-device-width: 480px) { // 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。 } |