首页banner宽度全屏显示的问题，div+css 200
<html><head><title>Title</title><style>.bannerbox{width:100%;position:relative;overfl...
<html>
<head>
<title>Title</title>
<style>
.bannerbox {
width:100%;
position:relative;
overflow:hidden;
height:200px;
}
.banner {
width:3000px;
position:absolute;
left:50%;
margin-left:-1500px;
}
</style>
</head>
<body>
<div class="bannerbox">
<div class="banner">
<img src="t1.jpg">
</div>
</div>
</body>
</html>
问题是电脑端显示正常，手机端Ipad，显示不正常，请高手指点 展开
<head>
<title>Title</title>
<style>
.bannerbox {
width:100%;
position:relative;
overflow:hidden;
height:200px;
}
.banner {
width:3000px;
position:absolute;
left:50%;
margin-left:-1500px;
}
</style>
</head>
<body>
<div class="bannerbox">
<div class="banner">
<img src="t1.jpg">
</div>
</div>
</body>
</html>
问题是电脑端显示正常，手机端Ipad，显示不正常，请高手指点 展开
展开全部
Web App在iPad调试页面，我们常常会遇到需要全屏显示的效果。下面就介绍一下如何使用HTML5代码来实现。
1、全屏显示：
<meta name="apple-mobile-web-app-capable" content="yes" />
2、设备宽度显示
<meta name="viewport" id="viewport" content="width=device-width,
initial-scale=1, minimum-scale=1, maximum-scale=1" />
先将以上两段代码加入到HTML5开发的页面当中。
3、将页面添加到iPad桌面
用iPad下的Safari浏览器访问开发的页面，点击“分享”图标，然后在下拉界面中选择“添加到主屏幕”。
可以修改名字，也可以通过代码：
<link rel="apple-touch-icon" href="icon.png" />
<!--http://www.beijingtengyi.com -->
修改图标，这样就有了一个可以全屏的webApp了。
注意：第一次可能不显示全屏，或许有缓存的问题。
1、全屏显示：
<meta name="apple-mobile-web-app-capable" content="yes" />
2、设备宽度显示
<meta name="viewport" id="viewport" content="width=device-width,
initial-scale=1, minimum-scale=1, maximum-scale=1" />
先将以上两段代码加入到HTML5开发的页面当中。
3、将页面添加到iPad桌面
用iPad下的Safari浏览器访问开发的页面，点击“分享”图标，然后在下拉界面中选择“添加到主屏幕”。
可以修改名字，也可以通过代码：
<link rel="apple-touch-icon" href="icon.png" />
<!--http://www.beijingtengyi.com -->
修改图标，这样就有了一个可以全屏的webApp了。
注意：第一次可能不显示全屏，或许有缓存的问题。
追问
你手机访问一下你的，牙齿教矫正的网站，
图片右侧感觉也隐藏了一块儿
追答
一般的写法如下：
XML/HTML Code复制内容到剪贴板
较多的写法：
XML/HTML Code复制内容到剪贴板
1.
在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。
其中：
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例
如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：
复制代码
代码如下:
这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
