HTML5网页如何在电脑端和手机端都全屏显示?
网页内容仅仅是一张图,然后是一张720*1280比例的图,想起到的效果就是比如手机打开这个网站,然后就是这张图自适应,图片的宽度就和手机屏幕的宽度固定,就是没有左右的滚动...
网页内容仅仅是一张图,然后是一张720*1280比例的图,想起到的效果就是比如手机打开这个网站,然后就是这张图自适应,图片的宽度就和手机屏幕的宽度固定,就是没有左右的滚动条。
代码是
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>2017新年快乐!</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
img { max-width: 100%;
}
</style>
</head>
<body>
<div style="width:100%; height:100%; z-index:1"><img src="QQ图片20170105022244.jpg" width="720" height="1280" alt=""/></div>
</body>
</html>
是初学者。。所以请用最简单的语言详细说 展开
代码是
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>2017新年快乐!</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
img { max-width: 100%;
}
</style>
</head>
<body>
<div style="width:100%; height:100%; z-index:1"><img src="QQ图片20170105022244.jpg" width="720" height="1280" alt=""/></div>
</body>
</html>
是初学者。。所以请用最简单的语言详细说 展开
2个回答
展开全部
HTML5网页在电脑端和手机端都全屏显示的步骤如下:
1、打开HTML5网页代码。
2、在网页头部加上新代码,让网页的宽度自适应设备的宽度。代码如下:
<meta name="viewport" content="width=device-width
initial-scale=1.0
maximum-scale=1.0
minimum-scale=1.0
user-scalable=no" />
3、在输入代码完成后,把图片包括图片DIV 的宽度设置成百分之百即可。
展开全部
在网页头部加上这句话 ,让网页的宽度自适应设备的宽度<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
然后把图片包括图片DIV 的宽度设置成百分之百即可
然后把图片包括图片DIV 的宽度设置成百分之百即可
更多追问追答
追问
还是不行。请看我补充的代码,有没有什么问题
追答
你把图片里的width="720" height="1280"这些删了 代码是顺序执行的 你前面加的百分百没有任何意义 这样写就OK
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询