2016-08-23 7 views
1

超広角である:ウェブページは、私は次のWebページを作成しましたモバイルブラウザウィンドウで

http://isometricland.net/games/games.php

問題は私のLumia上、UCブラウザだけでなく、エッジには、テキストが小さなであるということです。実際には、何かを読むためにズームインする必要があります。

これは私のCSSコードに問題がありますか?モバイルブラウザが端末の画面サイズを誤って報告していますか? emの単位で画面のサイズに基づいて少し異なるスタイルをレンダリングするためにいくつかのメディアクエリを書きましたが、最小のサイズは検出されていません。

私はこの問題は、Webページである場合は、この問題を解決したいと思いますが、私はそれは問題が何であるか Webページのせいで、または場合伝えるためにどのようには考えています。

助けてください!あなたの<head>に以下を追加し

答えて

3

試してみてください。詳細については

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

Using the viewport meta tag to control layout on mobile browsersを参照してください。

次の問題は、テーブルを使用することです。これらは、ページレイアウトが折り返されないので、はるかに広いレイアウトになります。

<div class="scroll-overflow"> 
    <table>...</table> 
</div> 
div.scroll-overflow { 
    overflow-x: scroll; 
} 

最後に、あなたのサイトの下部に完全な728×90の広告をロードしている:何あなたができることは、追加のオーバーフロースクロールします応答ラッパー内の場所これらのです。これも全体的なレイアウトが非常に広くなるため、画面上に表示するサイズが小さくなります。

ここでは、はるかに狭い広告を配置するか、CSSで広告幅を制限する必要があります。これらの小さな変更によって、あなたのサイトはすぐにモバイルユーザーにとってよりフレンドリーになります。

ここは、前(左)、後(右)です。

enter image description here

+0

さて、私はあなたが言ったことのいくつかを追ったが、「初期規模= 0.5」を設定し、私は*私はそれで満足していると思います*。少なくとも私のデバイスで。しかし、私はブラウザのデフォルトのズームレベルにいるとどのように伝えますか?画面をつまんでズームイン/ズームアウトできますが、ズームをデフォルトにリセットする方法はありますか?また、ダブルタップはズームレベルに影響するようです。しかしどうですか?私はこれが少し話題であることを知っているが、それは私を混乱させ、途中でやっている。ありがとう。 – posfan12

+0

Erm ..多分私はまだ混乱しています。デスクトップブラウザもメタビューポートタグに注意を払っていますか?私はちょうどそれを600pxに設定し、私のデスクストップ上のChromeはそれを無視しているようだ。 (そして、ダブルタッピングが何をしているのか分かりませんので、無視してください) – posfan12

+0

ブラウザのズームをデフォルトレベルにリセットする方法がわかりません。 (MS EdgeとUC Browserの両方で) – posfan12

関連する問題