2014-06-12 3 views
1

당신이 내 머리카락을 감싸는 것 같지 않아 원인을 도울 수 있기를 바랍니다. overflow-x 인 한 가지를 제외하고는 잘 작동하는 한 페이지짜리 사이트를 만듭니다. 태블릿 뷰포트에 숨겨져 있습니다. (아마도 스마트 폰이기도하고 아직 테스트되지 않았습니다.)Overflow-x : 숨김; 모바일 장치에서 작동하지 않습니다

body {overflow-x:hidden;}의 신체에도 불구하고 괜찮아, PC에서 정상적인 브라우저 내에서, 나는 약 25 픽셀 정도 측면으로 이동할 수 있어요, 그게 내가 숨기고 싶었던 화면 밖으로 스틱 내 회전 div의 오버 플로우가 발생합니다.

해결 방법이 있습니까? 나는 머리와 html/css의 일부 아래에 공급했다.

뷰포트 메타 태그.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

CSS의 미디어 쿼리에 적용하고

@media only screen and (max-width: 992px){ 
    #skills, #experience {overflow-x:hidden;} 
} 
@media (max-width: 479px){ 
    body     {overflow-x:hidden;} 
} 

오버 플로우 각각의 요소와 HTML/body 태그

body, html {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;} 

에 적용되는 일반 CSS ID입니다의 #skills#experience 후속으로 정의되고 오버플로를 야기하는 .hoek 클래스가 있습니다.

.hoek {margin: 0 -50px; 
       -webkit-transform-origin:left center; 
       -moz-transform-origin:left center; 
       -o-transform-origin:left center; 
       -ms-transform-origin:left center; 
       margin-top: -175px;      
       -webkit-transform:rotate(5deg); 
       -moz-transform:rotate(5deg); 
       -o-transform:rotate(5deg); 
       -ms-transform:rotate(5deg); 
       z-index: 20; 
    } 

나는 #skills#experiencesections하지 div의가 있다고, 나는 생각한다, 지적해야합니다. 코드 내에서 문제가 될지 모르겠지만 생각하지 않습니다. 더 이상 필요한 정보가 있으면 알려 주시기 바랍니다. 그러나 여기에서 기지를 다룰 수 있다고 생각했습니다.

는 어디서 바이올린으로 시작하는 몰라요, 그래서 나는 당신에게 사이트의 바로 테스트 링크를 제공합니다 : 모바일 deviced에

브라우저는 무시 : http://www.jellyfishwebdesign.nl/Joost/index.php

+0

body 태그에서 넘쳐 흐르는 것이 무엇입니까? – vico

+0

기울어 진 .hoek 클래스가있는 ID의 #skills 및 #experience가있는 섹션 – Dorvalla

답변

2

minimum-scale=1 대신 maximum-scale=1의 설정을 시도하는 것이, JQuery와 플러그인의 현재 사용을 방지한다는 것입니다. 그들이 확대 할 수 있습니다 얼마나 멀리 에서 maximum-scale 컨트롤하면서 에서 사용자가 확대 할 수 있습니다 얼마나 멀리

minimum-scale 컨트롤. 오버플로가 표시되지 않도록하려면 사용자가 아닌 사용자가 축소 할 수있는 기능을 제한해야합니다.

관련 문제