手機瀏覽器的寬度為980px;
使用980px寫頁面時,若是遇到字體變大情況,是因為block或者inline-block沒有設置寬高。設置即顯示正常。
980px設計,禁止手機頁面縮放:
<meta name="viewport" content="user-scalable=no" />
另注:使用jQuery或js往Htmlのhead中添加meta語句並不能使手機頁面禁止縮放。因為JS/jQuery代碼運行在後。
禁止縮放全語句:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
備注原測試語句:
JS中獲取設備高和寬:
var height=window.screen.height;
var width=window.screen.width;
jQuery寫入meta語句:經測試,已寫入head中,但無法使用
var scale=width/980;
var viewport="<meta name='viewport' content=";
var content="width=device-width";
var iscale="initial-scale="+scale;
var minscale="minimum-scale="+scale;
var maxscale="maximum-scale="+scale;
var content=viewport+content+" />";
var iscale=viewport+iscale+" />";
var minscale=viewport+minscale+" />";
var maxscale=viewport+maxscale+" />";
var userscale='user-scalable=no';
$("head").prepend(userscale);
$("head").prepend(maxscale);
$("head").prepend(minscale);
$("head").prepend(iscale);
$("head").prepend(content);
meta頭:分開寫和合併寫都可以實現效果
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=0.4212312">
<meta name="viewport" content="minimum-scale=0.42123213">
<meta name="viewport" content="maximum-scale=0.4212312">
<meta name="viewport" content="user-scalable=no">