html - Ios Iphone 6 Divs 过度扩展屏幕
问题描述
我有 3 个 div:
Main Container
A header
A search bar.
我用最少的代码让所有的 CSS 流畅且响应迅速。
但是经过测试,我发现了 1 个小问题。
在桌面上 一切看起来都很好,并且反应灵敏且准确
但是一旦我在我的 iPhone 上加载页面(其他都很好)
因为主体的最小宽度为 450 像素,所以屏幕宽度溢出而不适合 iPhone 屏幕,我添加了视点元标记,最初修正了我的问题并缩小了屏幕以适合 iphone,但那是最小宽度屏幕的适配。
现在我需要 450px 的最小宽度来适应某些内容,但现在它稍微超出了屏幕的宽度,而不是正确地适应。
html,
body {
margin: auto;
padding: 0px;
height: 100%;
min-width: 450px;
}
.mainContainerdiv {
position: relative;
padding: 10;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Sans-serif;
border: 1px solid #00bdff;
}
.headercontainer {
position: relative;
}
.topbanner {
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
font-size: 14px;
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
line-height: 22px;
border: 1px solid #111820;
height: auto;
}
.accountname {
font-weight: bold;
max-width: 60px;
display: inline-block;
}
.leftmenu {
padding: 6 0 6 0;
margin: 0;
display: flex;
overflow: hidden;
}
.leftmenuinner {
padding: 0px 10px 0px 10px;
margin: 0;
cursor: pointer;
}
.leftmenuinnername {
margin-right: 20px;
overflow: hidden;
cursor: pointer;
}
.leftmenuinner:hover {
color: dodgerblue;
}
.rightmenu {
padding: 6 0 6 0;
display: flex;
}
.rightmenuinner {
padding: 0 10 0 10;
margin: 0;
cursor: pointer;
}
.rightmenuinner:hover {
color: dodgerblue;
cursor: pointer;
}
.bellicon {
position: relative;
height: 30px;
width: 28px;
padding: 0;
margin-left: 8px;
margin-right: 12px;
background-image: url(../assets/icons/bellicon.png);
background-size: cover;
background-repeat: no-repeat;
}
.bellicon:hover {
background-image: url('../assets/icons/belliconhover.png');
}
.carticon {
position: relative;
width: 31px;
height: 30px;
padding: 0;
margin-left: 12px;
margin-right: 0;
background-image: url('../assets/icons/carticon.png');
background-size: cover;
background-repeat: no-repeat;
}
.carticon:hover {
background-image: url('../assets/icons/carticonhover.png');
}
.menuicon {
width: 0px;
height: 0px;
padding: 0;
margin: 0;
background-image: url('../assets/icons/menuicon.png');
background-size: cover;
background-repeat: no-repeat;
display: none;
}
.menuicon:hover {
background-image: url('../assets/icons/menuiconhover.png');
}
.menuiconappend {
display: none;
}
.sellclass {}
.watchclass {}
.myvbayclass {}
.dropdownarrow {
background-image: url(../assets/icons/dropdownarrow.png);
background-position: 5px 5px;
background-size: 10px 10px;
background-repeat: no-repeat;
float: right;
width: 22px;
height: 100%;
}
@media screen and (max-width: 800px) {
.topbanner {
font-size: 20px;
line-height: 29px;
}
.leftmenu {}
.leftmenuinner {
display: none;
}
.leftmenuinnername {}
.accountname {
max-width: 84px;
}
.rightmenu {}
.rightmenuinner {}
.carticon {}
.bellicon {}
.menuicon {
width: 0px;
height: 0px;
}
.dropdownarrow {
background-size: 16px 16px;
}
}
@media only screen and (max-width:600px) {
.topbanner {
position: relative;
line-height: 29px;
}
.sellclass {
display: none;
}
.watchclass {
margin-left: 0px;
padding-left: 0px;
}
.myvbayclass {
float: left;
}
.leftmenu {
display: none;
}
.rightmenu {
width: 100%;
/*width 100% only for media Q 600px else AUTO*/
justify-content: space-between;
}
.carticon {}
.bellicon {}
.menuicon {
display: block;
width: 30px;
height: 30px;
margin-left: 20px;
}
.dropdownarrow {
background-size: 16px 16px;
}
}
select {
border: none;
color: #5d5d5d;
font-weight: lighter;
width: 100%;
display: inline-block;
text-align: start;
padding: 0;
margin: 0;
outline: 0;
-webkit-appearance: none;
background: white;
cursor: pointer;
padding: 12px 22px 12px 4px;
/* 12px 22px 12px 4px; REQUIRED for arrow*/
background-image: url(../assets/icons/dropdownarrow.png);
background-position: 94%;
background-size: 10px 10px;
background-repeat: no-repeat;
}
button {
font-size: 20px;
}
.select1 {
font-size: 12px;
}
.select2 {
font-size: 12px;
}
.searchParent {
padding: 6 0 0 0;
margin: 0;
display: flex;
height: auto;
}
.VbayLogo {
min-width: 148px;
max-width: 148px;
height: 50px;
background-image: url('../assets/vbaylogoPng.png');
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
.searchcontainer {
width: 100%;
display: flex;
padding: 6 0 6 0;
margin: 0;
}
.catagory1 {
position: relative;
width: auto;
min-width: 95px;
height: 100%;
border: none;
color: #5d5d5d;
font-weight: lighter;
text-align: start;
appearance: none;
align-items: center;
margin: 0;
padding: 0;
outline: 0;
-webkit-appearance: none;
cursor: pointer;
}
.catagory1:hover {
color: dodgerblue;
}
.SearchBarInput {
position: relative;
width: inherit;
margin: 0;
padding: 12px;
font-size: 14px;
color: #111820;
font-weight: lighter;
text-align: start;
border: 1px solid #969696;
outline: 0;
cursor: text;
line-height: 100%;
}
.searchbarinput:hover {
color: dodgerblue;
}
.catagory2 {
position: relative;
width: 100%;
min-width: 140px;
max-width: 160px;
height: auto;
padding: 0;
cursor: pointer;
border: 1px solid #969696;
border-left: 0;
}
.catagory2:hover {
color: dodgerblue;
}
.SearchButton {
position: relative;
width: 164px;
border: none;
background-color: dodgerblue;
padding: 0;
color: white;
font-size: 16px;
margin-left: 10px;
cursor: pointer;
}
@media only screen and (max-width: 800px) {
select {
font-size: 20px;
}
.select1 {
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Sans-serif;
font-size: 14px;
}
.select2 {
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Sans-serif;
font-size: 14px;
}
.searchparent {}
.leftmenu {}
.vbaylogo {
display: none;
width: 0px;
min-width: 0px;
max-width: 0px;
height: 0px;
}
.catagory1 {
display: none;
}
.catagory2 {
padding: 0;
}
.searchcontainer {}
.searchbarinput {
font-size: 20px;
}
.searchbutton {
font-size: 22px;
}
}
@media only screen and (max-width:600px) {
select {
font-size: 22px;
}
.select1 {
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Sans-serif;
font-size: 16px;
}
.select2 {
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Sans-serif;
font-size: 16px;
}
.catagory1 {
display: none;
}
.catagory2 {
display: none;
}
.searchbarinput {
font-size: 22px;
}
.searchbutton {
font-size: 26px;
}
}
<div class='MainContainerDiv'>
<div class='HeaderContainer'>
<div class='SearchParent'>
<div class='VbayLogo'></div>
<div class='SearchContainer'>
<div class='catagory1'>
<select id="Catagory1" class='select1'>
<option selected>Category</option>
<option value="Electronics">Electronics</option>
<option value="Clothing">Clothing</option>
<option value="Computers">Computers</option>
<option value="Jewelry">Jewelry</option>
</select>
</div>
<input name='SearchBarInput' class='SearchBarInput' placeholder='Search For Anything'>
<div class='catagory2'>
<select id="Catagory2" class='select2'>
<option value="Electronics">Electronics</option>
<option value="Clothing">Clothing</option>
<option value="Computers">Computers</option>
<option value="Jewelry" selected>Jewelry and costume jewels</option>
</select>
</div>
<button id='SearchButtonID' class='SearchButton'>Search</button>
</div>
</div>
</div>
解决方案
推荐阅读
- python - subprocess.check_output 不返回完整的输出与 oping
- c# - 为了使用我的 netcore api 连接到 Mysql,我应该使用 json 文件连接还是应该使用下面的代码
- javascript - 在 JavaScript 中创建自定义的全局和类方法
- asp.net - 如何将 HTML 地理位置纬度和经度值从视图发送到控制器操作方法
- javascript - 如何使用 UIKit 让 2 个或更多动画在单个 div 中工作?
- git - github 私有存储库中的内容是否被泄露?
- php - laravel 一次生成超过 2000 页的 pdf 花费的时间太长
- python - 在python中将csv数据插入sqllite3
- android - Android Volley 缓存创建重复项
- javascript - 错误:[object HTMLParagraphElement],当从函数中分配变量时