首页banner宽度全屏显示的问题，div+css
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了首页banner宽度全屏显示的问题，div+css相关的知识，希望对你有一定的参考价值。
<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，显示不正常，请高手指点
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%"，整个页面在设备上看起来就是全屏的了。
以上是关于首页banner宽度全屏显示的问题，div+css的主要内容，如果未能解决你的问题，请参考以下文章