0

CSS1カラムでリキッドレイアウト設定した時のAndroidでの見え方について スマートフォンに対応したサイトにしようとリキッドレイアウトの導入を考えており、
色々と調べて、パソコンブラウザ(GC,Firefox)とiPhoneで見るとうまくいったのですが、Androidでの見え方に問題があります。

動作確認はGalaxy3(SO-06D)でしています。
・デフォルトブラウザ
・Dolphin Browser
上記2つのアプリで確認しましたが、ブラウザによっても見え方がまったく異なります。

画像を添付しましたので、そちらで確認してもらえればと思います。
①→デフォルトブラウザで表示
②→①をスワイプした状態
③→ドルフィンで表示
④→③をスワイプした状態

ソースは、

HTML↓(body,headは省略します)

<div class="colmask fullpage">
<div class="col1">
<!-- Column 1 start -->
本文
<!-- Column 1 end -->
</div>
</div>

CSS↓

body,td,th{
font-size:80%;
color:#666666;
width:100%;
min-width:500px;
font-family:Verdana,Osaka,'メイリオ';
font-weight:normal;
margin:0;
padding:0;
}

.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}

.fullpage {
background:#FFFFFF;
}

.fullpage .col1 {
margin:0 1em;
}

としています。
iPhoneではきちんと画面幅での改行がされているのですが、Androidだと見え方に差異があったりよくわからない場所で改行が入ってしまうので困っています。

どなたか詳しい方、何がいけないのかご教授いただければと思います。
何か他に必要な事項やソース部分がありましたら、追記しますので、よろしくお願いします。

質問者が選んだベストソリューション

Yahoo!知恵袋 3995日前