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>
是初学者。。所以请用最简单的语言详细说
展开
 我来答
兰婷集需
高赞答主

2018-03-31 · 大脑停止不了思考
知道小有建树答主
回答量:100
采纳率:0%
帮助的人:15.7万
展开全部

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 的宽度设置成百分之百即可。

山东文汇
2017-01-05 · 我们年轻我们有活力、我们执着我们有耐心。
山东文汇
专业的软件开发服务商,网站开发、APP开发、微信小程序、商城小程序、知识付费产品。
向TA提问
展开全部
在网页头部加上这句话 ,让网页的宽度自适应设备的宽度<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

然后把图片包括图片DIV 的宽度设置成百分之百即可
更多追问追答
追问
还是不行。请看我补充的代码,有没有什么问题
追答
你把图片里的width="720" height="1280"这些删了  代码是顺序执行的   你前面加的百分百没有任何意义    这样写就OK
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式