안드로이드 브라우저에서의 CSS 레이아웃

저는 CSS는 아주 초록색이지만 웹 페이지를 만들고 있습니다. 많은 검색과 코딩을 거친 후에 저는 브라우저 호환성이 상당히 뛰어났습니다. 그러나 다른 주요 브라우저와 비교할 때 Android 폰이 웹 페이지를 렌더링하는 방식에는 큰 차이가 있습니다. 그것은 다음과 같습니다안드로이드 브라우저에서의 CSS 레이아웃

당신이 볼 수 있듯이

http://neobux.se/1.jpg (및 2.JPG)

, 그것은 가로보기 약간 낫다. 가로보기에서 "여백"이 확장되기 때문에 저는 두 가지 모두 너비가 50 % 인 # sidhuvud-vanster-container 또는 # sidhuvud-hoger-container 중 하나와 관련이 있다고 생각합니다. Firefox/Chrome/IE에서 http://viriol.dyndns.org/~elias/을보고 어떻게 보이는지보아야합니다.

도움을 많이 받으실 수 있습니다! 감사!

/엘리야

출처

2013-05-11 viriol

오늘 CSS/HTML에서 범위를 좁히려 고 시도했습니다.

<html> 
    <head> 
    </head> 
    <body> 
    <h2>Välkommen till Västkustens Plattsättning!</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    </body> 
</html>

CSS가없는이 HTML은 실제로 Android 브라우저에서 똑같은 문제를 일으켰습니다. 좀 더 조사한 후에 마침내 내 해결책을 찾았습니다. 몇 가지 조사를 한 결과, 브라우저에서 기본적으로 사용하도록 설정된 "자동 맞춤"옵션으로 인한 "버그"라는 사실을 알게되었습니다. 이것은 더 스택 오버플로 here 및 here에 대한 읽을 수 있습니다

h1, h2, h3, p { background: url(../bilder/transparent.gif); }

이 솔루션은 투명한 GIF/PNG를 작성하고 H1 배경, H2, H3 ... 그리고 페이지로 사용하는 것입니다.

출처

2013-05-11 11:12:33 viriol

여기에서 살 수있는 규칙 : 당신이 #의 kontenta-hoger을 떠하려는 경우

"부동 때를 제외하고 마우스 오른쪽 왼쪽에서" 오른쪽으로 이동 한 다음 HTML에서 첫 번째인지 확인하십시오. 즉.

<div id="kontenta-hoger"> <img src="img/img.jpg"> </div> <div id="kontenta-vanster"> orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula turpis gravida tellus mattis id pretium diam dictum. Donec eget massa sit amet nulla suscipit ultricies in in justo. Sed lu </div>

오른쪽에 img div를 플로팅해야하기 때문에 HTML 마크 업에서 첫 번째로 넣습니다.

기본 해상도가 다른 해상도에서 반응하지 않고도 호환되도록하려면 너비에 백분율을 사용하는 것도 좋습니다.

출처

2013-05-11 00:52:40

감사합니다. 정말 잘 알고 있습니다. 확실하지는 않지만 내 페이지에 적용되는 것은 아니라고 생각합니다. img는 주변 div가 아니라 오른쪽으로 떠있었습니다. divs/the 페이지는 960 그리드 시스템을 사용하여 작성됩니다. 따라서 HTML 마크 업에서 순서를 변경하면 div가 단순히 장소를 변경합니다. – viriol

안드로이드 브라우저에서의 CSS 레이아웃

답변

관련 문제