나는 사이트를 테스트하고 있으며 데스크톱 / 노트북에서 완벽하게 작동하지만 모바일 장치를 사용하자마자 끔찍하게 실패합니다. 페이지를 인식 할 수 없습니다.
예제 페이지는 http://danjamespalmer.com/projects/decoathletic/index.html에서 실행 중입니다 . 모든 CSS와 JS는 소스에서 볼 수 있습니다. 다음은 모두 동일한 예입니다.
HTML :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Deco Athletic || You Decide</title>
<!-- JavaScript -->
<script src="jquery/jq.js"></script>
<script src="js/deco.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<!-- Stylesheets -->
<link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="css/deco_full.css">
<link rel="stylesheet" media="screen and (min-device-width: 650px) and (max-width: 999px)" href="css/deco_650.css">
<link rel="stylesheet" media="screen and (max-width: 649px)" type="text/css" href="css/deco_649.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div id="main>">
<div id="header">
<div id="header_data">
<div id="logo"><a href="index.html"><img src="images/logo.png" alt="deco athletic logo" class="logo_image"></a></div>
<div id="mobile_menu_icon"></div>
<div id="navbar">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">SHOP</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
</div>
<div id="first_section">
</div>
<div id="second_section">
test
</div>
</div>
</body>
</html>
메인 페이지 CSS :
html, body {
margin:0px;
height:100%;
}
#main {
width: 100%;
margin: 0 0 0 0;
padding: 0;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#header {
height:90px;
width:100%;
background-color:#C03133;
margin: 0px auto;
}
#header_data {
height:90px;
width:1000px;
background-color:#C03133;
margin: 0px auto;
position:relative;
}
#logo {
position: absolute;
top: 50%; left: 0%;
transform: translate(-0%,-50%); /* left,top */
}
#navbar {
position: absolute;
top: 90%; left: 100%;
width:420px;
transform: translate(-100%,-100%); /* left,top */
}
/* Navigation Bar <ul> */
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/* Navigation Bar <li> */
#navbar li {
display: inline;
margin: 10px;
}
/* Navigation Bar <a> */
#navbar li a {
font-size:18px;
color:#FFFFFF;
}
#first_section {
background-image:url(../images/bg_low.jpg);
background-size:cover;
}
#second_section {
margin: 0px auto;
position:relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
브라우저를 사용하여 랩톱에서 테스트 할 때 페이지 크기를 조정할 수 있으며 예상대로 반응합니다. 그러나 모바일 장치에로드되면로드되지 않습니다.
모든 CSS 파일이 모바일 장치에로드됩니까?
보시다시피 다양한 화면 너비와 관련된 3 개의 CSS 파일이 있습니다. 모바일 장치가 css / deco_649.css 만로드하는 경우 올바르게 스타일이 지정되지 않는 이유를 이해할 수 있습니다.
"deco_full.css"파일에이 CSS 선택기가 있습니다.
#first_section {
background-image: url(../images/bg_low.jpg);
background-size: cover;
}
이 조각은 이미지 배경을 정의했습니다. 그러나 장치 화면 최소 너비가 1000px 인 경우에만이 파일을 사용하도록 설정했습니다. 다음 참조를보십시오.
<link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="css/deco_full.css">
그러나 모바일 및 태블릿 장치에 대해 소개 한 두 개의 다른 CSS 파일에 대한 배경 정의가 동일하지 않습니다. 두 CSS 파일에 동일한 CSS (아마 다른 이미지 포함)를 추가하면 좋습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다