JSP頁面如何在手機上自適應變化

當我們把PC端碼好JSP頁面放在手機上顯示時總會出現手機裝置尺寸不匹配的問題。

解決方法：在JSP網頁程式碼的頭部，加入一行viewport元標籤，如下：

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

viewport是網頁預設的寬度和高度，上面這行程式碼的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。

通常，為了使JSP頁面更加匹配各類手機，在JSP頁面設計時應該遵循一下的規則：
一、 允許網頁寬度自動調整： "自適應網頁設計"
即在網頁頂部加上自適應的viewport元標籤

二、儘量不要使用絕對寬度
網頁會根據螢幕寬度調整佈局，所以不能使用絕對寬度的佈局，也不能使用具有絕對寬度的元素。 具體說，CSS程式碼不能指定畫素寬度： width:xxx px; 只能指定百分比寬度： width: xx%; 或者：width:auto。

其他規則可參考：
https://www.cnblogs.com/emanlee/p/11563585.html