모바일 브라우저에서 유체 고정 레이아웃 관련 문제

모바일 및 데스크톱 브라우저에서 내 웹 사이트를 올바르게 작동시키는 데 문제가 있습니다.모바일 브라우저에서 유체 고정 레이아웃 관련 문제

나는 다음과 같은 형식의 레이아웃을 가지고 :

<body> 
    <div id="div1"><div class="container"></div></div> 
    <div id="div2"><div class="container"></div></div> 
    <div id="div3"><div class="container"></div></div> 
</body>

div1, DIV2 및 div3의 각 단색 배경 색상을 가지고 있고 그들이 그들 각각의 내부에, 브라우저의 폭에 맞게 스트레칭 할 나는 width : 1000px의 속성을 가진 "container"클래스를 가진 div를 가진다.

모든 콘텐츠를 1000px 너비로하고 싶지만 브라우저의 너비와 일치하도록 색상이 지정된 div가 필요합니다.

데스크톱에서 정상적으로 작동하지만 모바일에서 문제가 발생합니다. 나는

당신이 모바일 장치에서이 링크를 당기면 문제를보고 바탕 화면 : 그것을 개방에 비교할 수 HTML5 Boilierplate을 사용하고 http://svth.azurewebsites.net/

출처

2014-01-27 SUPERSTEVE

그것은 소리 : 예를 들어, Respond.js이 추가 CSS를 포함 할 수 있습니다. 이 경우이 과정에서 당신을 돕기 위해해야 할 일이 몇 가지 있습니다. 이 작업에 도움이되는 몇 가지 좋은 웹 리소스가 있습니다.

Example 1 Example 3 Example 2

이 소화 할 수있는 많은이지만 거의 두 가지로 요약된다

유연한 페이지를 유지하거나 % 또는 em의 모든 폭. 따라서 width: 1000px 대신 을 사용하십시오.
다른 화면 크기에 대해 CSS를 변경하려면 미디어 쿼리를 사용하십시오. 이 경우 모바일 크기 화면 용입니다.

출처

2014-01-27 03:51:39 badAdviceGuy

문제는 당신의 접근 방식에 있습니다에서 요소를 고정 1000px로 표시 한 다음 장치의 크기에 관계없이 그보다 얇은 창에 표시하면 모양이 좋지 않습니다.

div가 브라우저의 너비와 일치하고 1000 픽셀 너비로 멈추게하려면 "width : 1000px;"를 바꿉니다. .container CSS에서 "max-width : 1000px;"

원하는 목표가 아니라면 Google에 알려 주시면보다 구체적인 답변을 제공 할 수 있습니다.

IE6은 max-width 특성을 지원하지 않습니다. 이 브라우저를 지원하려면 몇 가지 해결 방법이 있어야합니다. 당신이 당신의 페이지에 대한 반응 디자인을 만들려고하는 것처럼

@media (min-width: 1000px) { 
    .lt-ie7 .container { 
    width: 1000px; 
    } 
}

출처

2014-01-27 03:48:17