0

そのため、これまでのところ、この問題は Android ブラウザーでしか経験していません。基本的に、私のサイトはほぼ常に問題なく動作します (Dolphin、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 分後にクリックされた場合にのみ発生するようです。ストック Android ブラウザを再度開きます。次に、ブラウザはキャッシュからページを取得しているようですが、それでもajaxのウィンドウオンロードを実行しているため、ブラウザにキャッシュされたページと（おそらく？） ajaxからのjavascript DOM操作を組み合わせて使用​​ することは何かだと思いますAndroid ストック ブラウザには独自の問題があり、ビューポートの外側でテーブルの幅が壊れています。あるいは、DOM の変更はそれとは何の関係もないかもしれません。

電話の電源を切ってから入れて、ブックマークをクリックすると、ストックブラウザがサーバーからページをリロードするため、問題は発生しません。ブラウザが最小化されていて、ブックマークがわずか 2 分後に再度クリックされた場合、ブラウザは何もせずにそのままの状態で最後のページを再表示するため、問題はありません。

ページがブラウザのキャッシュから取得された場合にサーバーから強制的にリロードするために、上に投げることができるある種のハックを考えていました。または、ブラウザのキャッシュをオフにしてみることができると思いますが、画像、CSS、読み込み時間などでそれを行うことの意味。私のオプションを検討しています...考えは歓迎します。

更新: ブラウザのキャッシュをオフにすると、この問題の発生率が低下した可能性があります (確かではありませんか?)。このブログ投稿で説明されているのと同じ問題が発生している可能性があると考えています。

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

更新: これまでに試したことはありませんが、Android ストック ブラウザーでこの断続的な問題を防ぐことはできませんでした。しばらくの間、アプリの通常の使用を Dolphin に切り替えて、そのブラウザーで問題が発生するかどうかを確認します。私がこれまでに試したことは、メタタグを使用してブラウザのキャッシュを無効にすることです（Androidブラウザはそれをある程度無視すると思います）...テーブルの幅を変更します（別の方法でもう一度試すかもしれません）...ここのコメント 14 に投稿されたソリューションを使用して (CSS リンクを動的に作成): https://code.google.com/p/android/issues/detail?id=11961#c14そして最後に、URL に Datetime ticks を追加しようとしましたキャッシングを軽減しようとしても、うまくいきませんでした。

ここでさらに役立つ情報: http://f055.tumblr.com/post/6364300769/viewport-bugs-in-android-browser

4

1 に答える 1

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;
 }
于 2012-05-10T22:08:06.350 に答える