コードを表示する webapp/phonegap アプリを開始する準備をしています。
コードを表示するには、highlight.js を使用します。HighlightJs は pre タグを使用し、固定幅フォントを使用する monokai_sublime というスタイルを持っています
最大 40、60、または 80 文字の長さになるように慎重に編集されたコードのスニペットがあります。
私が欲しいのは、3 つの css クラス .code40、.code60、.code80 を持つことができる css またはビューポート マジックです。これらを要素に設定すると、要素の幅が正確に 40 を含む場所になります。 60、または 80 の固定サイズ文字。
このスニペットの全幅を表示したいと思います
do_some_cool_magic(with,stuff); //size40
このスニペットも同じ幅（全幅）で表示するため、フォントサイズを小さくします
do_some_cool_magic(with, {stuff:"that is longer"}); //size60
電話を横向きに切り替えても、同じことを行うはずです。クラス code60 が適用される場合、60 文字は画面 (または div) の全幅である必要があります
現在、電話画面の想定ピクセル数（1080x1920）をハードコーディングし、フォントサイズを一致するピクセル量に設定しましたが、電話では巨大な文字として表示され、画面に収まりませんでした(200% ズームされているかのようにスクロールがありましたが、とにかく画面の正確なサイズ/比率に依存していました)
ここにjsfiddleがありますhttp://jsfiddle.net/xqck5j4g/
私はあなたがフィドルを書き直すことを期待していませんが、css を設定する効果的な方法は次のようになることを知りたいです。フォントは 60 文字で幅いっぱいになります。 それが役立つ場合、幅は常に 100% であると想定できます。