2013-08-24 15 views
6

自分のウェブサイト用のコードフォーマッタを作成していましたが、デスクトップとモバイルブラウザ間で奇妙な動作が発生しました。デスクトップ上のコードブロックは次のようになります。デスクトップからモバイルブラウザへの判読不可能なフォントサイズの変更

​​

と私のiPhone上で行番号は、何らかの理由で、ある小さなフォントサイズで:

私は持っていません私のウェブサイトの任意の種類のフォントサイズを編集するために何かをしました。それはすべてデフォルトサイズです。手動でフォントサイズを12pxに設定しても、それはデスクトップブラウザに並んでいて、モバイルブラウザではさらに小さくなっています。

コードブロックは、2つのセルを持つテーブルとしてレイアウトされています。左のセルには1列の表があり、各行には数字が入っています。右のセルには1つの列テーブルがあり、各行にはコード行が含まれています。

モバイルブラウザでフォントが縮小されている理由は何ですか?

EDIT:LINK:http://grantslatton.com/posts/blog/2013-08-16/sudoku_solver/

EDIT2:これは、Windowsの携帯電話とAndroid携帯電話上で正しくレンダリングされます。

解決策:モバイルSafariは、あなたのためにテキストサイズを変更することを決定します。

私のCSSのbody {}セクションに100%を入れて、モバイルサファリが自分のテキストサイズで邪魔にならないようにしました。

+1

ヒント:答えを得るためにいくつかのコードを入れてみてください:) –

+0

@MohammadAreebSiddiquiコードは構文強調表示のために使用されているので、残念ながら、それは自動的に私が書いたPythonプログラムによって生成され、非常に厄介です。あなたはここでそれを見ることができます:grantslatton.com/posts/blog/2013-08-16/sudoku_solver – GrantS

+0

テストできることがいくつかあります。標準モードでウェブサイトを作成してみてください。これはQuirksモードでレンダリングされていますので、モバイルブラウザの癖に遭遇している可能性があります。 2つの列の違いは、右側の列のテキストが ''要素にあり、左側の数字はそうではないことです。 –

答えて

7

モバイルSafariは、あなたのためにテキストサイズを変更することを決定しました。私が働いて、このページのソリューションを見た:

私は私のテキストサイズをいじってからモバイルサファリを防ぐために、私のCSSに以下を置きます。

body { 
    -webkit-text-size-adjust: 100%; 
} 
+0

保存した私の一日!この回答を正解にしてください!ありがとう! – javsmo

関連する問題