Html5移動開發(1)必要知識
阿新 • • 發佈：2018-12-23
做移動站有一個必要的知識，就是關於螢幕寬度以及縮放問題。我們習慣性的在
<head>
標籤之間增加一個
<meta>標籤：
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
//視窗設定
name="viewport"
//頁面大小螢幕等寬
width=device-width
//初始縮放比例，1.0 表示原始比例大小
initial-scale=1.0
//允許縮放的最小比例
minimum-scale=1.0
//允許縮放的最大比例
maximum-scale=1.0
//使用者是否可以縮放，這裡 no 表示不可以
user-scalable=no
上面最大最小比例其實就已經限制了無法縮放了，和最後一個是否可以縮放有同樣的功
能。
因為不同的手機，解析度都不同，圖片一定要能夠自適應等比例縮放，才能保證佈局的
正確性。
//設定 max-width 後，圖片開始自適應
img {
display: block;
max-width: 100%;
<head>
標籤之間增加一個
<meta>標籤：
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
//視窗設定
name="viewport"
//頁面大小螢幕等寬
width=device-width
//初始縮放比例，1.0 表示原始比例大小
initial-scale=1.0
//允許縮放的最小比例
minimum-scale=1.0
//允許縮放的最大比例
maximum-scale=1.0
//使用者是否可以縮放，這裡 no 表示不可以
user-scalable=no
上面最大最小比例其實就已經限制了無法縮放了，和最後一個是否可以縮放有同樣的功
能。
因為不同的手機，解析度都不同，圖片一定要能夠自適應等比例縮放，才能保證佈局的
正確性。
//設定 max-width 後，圖片開始自適應
img {
display: block;
max-width: 100%;
}
不同解析度效果同<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> <title>移動開發</title> <style> img { display: block; max-width: 100%; } </style> </head> <body> <img src="img/4.jpg" /> </body> </html>
