Question

这是它的代码，当通过Android Chrome浏览器，Xperia z1看到它只占据浏览器页面的1/3 请有人建议一些改变

    <html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
    <style type="text/css" >
*{
    margin:0;
}



html { 
  background: url('Startupal coming soon4.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media only screen and (max-width: 600px) {

    img src="Startupal coming soon4.jpg" {width: 100%; height: 100%; margin: 0; padding; 0;}
}


}

</style>
</head>
<body>

</body>



</html>

这是整个代码，它在PC上工作正常，但在手机上却不行

Answer 1

使用javascript脚本标记或文件，并在每次调整页面大小时更新html body元素的宽度和高度。

我通常使用window.innerWidth和innerHeight，因为它是交叉兼容的并且看起来很可靠。

window.addEventListener("resize", onResize);
function onResize(){
    document.body.width = window.innerWidth;
    document.body.height = window.innerHeight;
}

我的网站只占用了我的sony xperia手机浏览器屏幕的一小部分

1 个答案: