0
오늘 내 프로젝트를 테스트 할 때 내 웹 사이트의 모바일 탐색에 일부 iOS 기기의 목록 항목이 표시되지 않는 것으로 나타났습니다. 나는 아이폰 5와 IPad 미니에서 테스트를 거쳤으며, 그것들은 으로 테스트를 마쳤다. 아이폰 4와 구형 Ipad에서 테스트 한 결과 네비게이션의 목록 항목이 표시되지 않았다. 그래서 나는 그것이 내가 생각하기에 구식 IOS 또는 장치에 문제를 동봉했다고 생각합니까? 필자는 바탕 화면에있는 inspect 요소 도구를 사용하지 않고이 문제를 어떻게 디버깅해야하는지 잘 모릅니다. 나는 또한 내 코드에서 실제로 문제를 발견하지 못한다.일부 iOS 기기의 내 웹 사이트 탐색
내 웹 사이트 URL : http://gillesvercammen.be/praniels/ 누구든지 오래된 iOS 기기에서이를 테스트 할 수 있다면 용감하게 맞을 수 있습니다. 아래에서는 버그 관련 코드 스 니펫을 작성하겠습니다. 제 코드가 조금 지저분하면 제발 용서해주십시오. 제 첫 번째 괜찮은 크기의 프로젝트입니다.
몇 가지 관련 CSS 라인
header {
/*background-color: rgba(255,255,255,0.5);*/
position: fixed;
left: 0;
height: 120px;
top: 0;
width: 100%;
z-index: 10;
display: block;
}
.logo {
z-index: 12;
position: absolute;
left: 50px;
top: 0;
display: block;;
width: 150px;
padding-top: 10px;
}
.nav {
z-index: 11;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
}
.non-transparent
{
z-index: 11;
background-color: rgb(31,15,16) !important;
}
.main-nav {
list-style: none;
}
.mobile-logo {
display: none;
}
.nav li {
display: inline-block;
vertical-align: middle;
height: 120px;
letter-spacing: 1px;
text-transform: uppercase;
}
.nav li a {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: bold;
text-decoration: none;
display: block;
line-height: 16px;
height: 16px;
padding: 25px 10px 24px;
}
.nav li a:hover {
color: rgb(212,192,152);
}
.nav ul li .active {
color: rgb(212,192,152);
}
.icon-nav {
position: absolute;
right: 0px;
top: 0;
margin-right: 50px;
}
.icon {
display: inline-block;
zoom: 1;
vertical-align: top;
width: 44px;
height: 0;
padding-top: 44px;
overflow: hidden;
text-align: left;
white-space: nowrap;
}
.logout {
position: absolute;
right: 10px;
top: 10px;
text-decoration: none;
border: 1px solid rgb(246,246,226);
padding: 5px;
}
.admingo {
position: absolute;
right: 80px;
top: 10px;
text-decoration: none;
border: 1px solid rgb(246,246,226);
padding: 5px;
}
.fa-lock, .fa-unlock-alt {
margin-right: 5px;
}
.logout:hover {
border: 1px solid rgb(212,192,152);
color: rgb(212,192,152);
}
/* ================= RWD =============== */
@media screen and (min-width: 769px) {
.logo {display: block !important; }
#hamburgerknop { display: none !important; }
.nav { display: block !important; }
}
@media screen and (max-width: 768px) {
header {
height: 80px;
}
.main-nav {
display: none;
}
.expand .main-nav {
display: block;
}
#hamburgerknop {
background: rgba(31,15,16, 0.35);
padding: 8px;
text-decoration: none;
width: 100%;
z-index: 2;
height: 80px;
}
#hamburgerknop span {
margin-top: 15px;
cursor: pointer;
display: block;
padding: 3px 4px 3px;
position: relative;
color: rgb(246,246,226);
font-size: 2em;
line-height: .8;
text-align: center;
}
.nav ul {
list-style: none;
margin: 0;
width: 100%;
height: 100%;
background-color:rgb(31,15,16);
padding: 0;
}
.main-nav {
height: 0px;
}
.nav li:nth-child(1){
padding-top: 5%;
}
.nav li {
display: block;
position: relative;
font-size: 1em;
font-weight: bold;
height: 20%;
}
.nav li a {
height: initial;
display: block ;
background: none !important;
color: #fff;
text-decoration: none;
}
.nav {
clear: both;
position: fixed;
}
nav {
height: auto;
display: none;
position: fixed;
}
.expand {
display: block !important;
}
.logo {
display: none;
}
.mobile-logo {
z-index: 12;
position: absolute;
top: 0;
display: block;
margin-top: 5px;
width: 100px;
}
}
당신은 아직도 그 오래된 장치가있는 경우 사용하려고 할 수 있습니다 [WeInRe] (http://stackoverflow.com/a/22047495/5108318) 사이트를 디버깅하기 – pzmarzly