안드로이드 브라우저 WIDTH 관련 웹 응용 프로그램

Question

그래서 지금까지 안드로이드 브라우저에서만이 문제를 경험했습니다. 기본적으로 내 사이트는 거의 항상 작동하지만 (돌핀, Opera 또는 Skyfire에서는 아직 문제를 보지 못했습니다) 가끔 내 휴대 전화의 홈 화면 중 하나의 북마크에서 Android 브라우저를 다시 열면 내 사이트가 가로로 늘어서는 것처럼 보입니다. 이제 겨우 2/3의 왼쪽 면만 보았습니다. 브라우저가 최소화 된 동안 CSS 나 메타 정보를 잃어버린 것처럼 말입니다. 여기에 내 메타 태그가 있으며, 테이블 스타일에 너비 100 %를 사용하고 있습니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="keywords" content="Task, Tasks, Goal, Goals, Habit, Habits, Track, Tracking, Best Habit Tracker"/> 
<meta name="description" content="Top Habit Tracker!"/> 
<meta name="mobileoptimized" content="0"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

이 문제는 약 30 분 후에 북마크를 클릭 할 때만 발생하는 것으로 보입니다. 안드로이드 브라우저를 다시 열려면. 그런 다음 브라우저가 캐시에서 페이지를 가져 오지만 여전히 ajax 용 window onload를 실행하므로 브라우저 캐시 된 페이지를 사용하여 조합을 생각하고 있습니다 (아마도?) 아약스의 DOM 조작은 안드로이드 주식 브라우저가 유일하게 문제가있어 뷰포트 외부에서 테이블 폭이 깨졌습니다. 또는 DOM 변경 사항과 관련이 없을 수도 있습니다.

휴대 전화의 전원을 껐다가 켜고 북마크를 클릭하면 주식 브라우저가 서버의 페이지를 다시로드 한 다음 문제가 발생하지 않습니다. 브라우저를 최소화하고 북마크를 2 분 만에 다시 클릭하면 아무 것도하지 않고 브라우저가 자체 및 마지막 페이지를 그대로 다시 표시하기 때문에 문제가 발생하지 않습니다.

나는 브라우저 캐시에서 페이지를 가져온 경우 서버에서 다시로드하도록 강제 할 수있는 일종의 해킹을 생각해 보았습니다. 그렇지 않으면 브라우저 캐싱을 해제 할 수 있다고 생각하지만 이미지, CSS,로드 시간 등에서 이러한 일을하는 것에 대해 궁금해하고 있습니다. 제 선택 사항에 대해 생각해보십시오 ... 생각을 환영합니다.

업데이트 : 브라우저 캐싱을 해제하면이 문제의 발생률을 줄일 수 있었지만 확실하지는 않습니다. 나는 지금이 블로그 게시물에 설명 된대로 저도 같은 문제가 발생 될 수 있습니다 생각하고 있어요 :

http://www.gabrielweinberg.com/blog/2011/03/working-around-androids-screenwidth-bug.html

업데이트를 : 나는 지금까지 해봤 OK 아무것도 내 안드로이드 주식 브라우저에서 간헐적 인 문제를 방지하지 않았다. 문제가 해당 브라우저에서 발생하는지 잠시 동안 Dolphin으로 내 앱을 정기적으로 전환 할 것입니다. 내가 지금까지 시도한 것은 : 메타 태그를 사용하여 브라우저 캐싱을 비활성화하는 것입니다. (어느 정도는 안드로이드 브라우저가 무시한다고 생각합니다.) ... 테이블 너비를 변경합니다 (다른 방식으로 다시 시도 할 수 있습니다) ... 여기에 코멘트 14 (동적으로 CSS 링크 만들기)에 게시 된 솔루션 사용 : https://code.google.com/p/android/issues/detail?id=11961#c14 그리고 마지막으로 캐싱을 완화하기 위해 URL에 Datetime 틱을 추가하려고 시도했지만 그 중 하나도 작동하지 않았습니다. 여기

더 유용한 정보 : http://f055.tumblr.com/post/6364300769/viewport-bugs-in-android-browser

Answer 1

이 유 도움이 될 것입니다 확실하지 -하지만 이것은 내가 내 모바일 애플 리케이션을위한, 그래 아마 그냥 놀러 필요를

This is the only meta I use... 
<meta content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> 


<div class=general> 

All Ur Content in here etc - or next div etc... 
Below the margin-left: 1% and margin-right: 1% formats your div to your width 
So if ur browser is upright or wide - it is always 1% border width and fits screen. 
Don't use any table width=800 or anything - control it with the 1% margins 

</div> 

.general { 
font-family: Verdana; font-size: 10pt; font-weight: normal; 
position: relative; 
background-color: #fafafa; 
padding: 8px; 
margin-top: 4px; 
margin-left: 1%; 
margin-right: 1%; 
border: 1px solid #000; 
border-radius:5px; 
}