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

2021-10-10 11:37:28 字數 675 閱讀 1759

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

解決方法:在jsp網頁**的頭部,加入一行viewport元標籤,如下:

"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:*** px; 只能指定百分比寬度: width: xx%; 或者:width:auto。

其他規則可參考:

Vue如何在手機上除錯

local http localhost 18080 連線本地 network 網路連線,這個會經常存在訪問不了,不推薦使用 這個cmd命令的意思是 android允許我們通過adb,把android上的某個埠對映到電腦 adb forward 或者把電腦的某個埠對映到android系統 adb r...

移動端專案如何在手機上檢視效果

很多時候我們需要在真機上除錯,進行 的維護修改,如何在手機上檢視呢?我們拿vue來說,1.在vue的config index.js檔案中我們可以看到專案啟動的乙個埠號 上圖網域名稱是我進行修改後的,大家開啟後應該會預設顯示localhost 2.window r,輸入cmd進入控制台,然後輸入命令i...

Eclipse 中如何在手機上除錯程式

1 手機通過資料線連線電腦 2 開啟手機設定 開發者選項 usb除錯 注 有的手機開發者選項預設沒有開啟請根據自己手機品牌在網上搜尋開啟方法 有的手機上會提示是否允許usb調試點確定 3 安裝驅動 安裝成功後右鍵我的電腦到管理 看裝置管理器中有 android device 沒,如果有就是安裝成功了...