我已准备好开始使用将显示代码的webapp / phonegap应用。
我将使用highlight.js来显示代码。 HighlightJs使用pre标签，并且有一个名为monokai_sublime的样式，它使用固定宽度字体
我仔细编辑的代码段长度最多为40,60或80个字符。
我想要的是一些css或视口魔术，我可以拥有3个css类.code40，.code60，.code80，当我在元素上设置它们时，它会使它到达元素宽度的位置包含40,60或80个固定大小的字符。
所以我想展示它占据整个宽度的片段
do_some_cool_magic(with,stuff); //size40
但是也会以相同的宽度（全宽）显示此代码段，因此字体较小
do_some_cool_magic(with, {stuff:"that is longer"}); //size60
如果我将手机切换到横向，它仍应该做同样的事情。如果应用类代码60，则60个字符应该是屏幕（或div）的整个宽度
现在我只是硬编码了我的手机屏幕所具有的像素数（1080x1920），并将字体大小设置为匹配的px数量，但在我的手机上，它显示为巨大的字母并没有＆＃39;适合屏幕（有滚动，好像它被放大了200％，好吧，它取决于屏幕的确切大小/比例）
这里是jsfiddle http://jsfiddle.net/xqck5j4g/
我不期待你改写小提琴，但我想知道设置我的CSS的有效方法是：无论屏幕大小，方向，dpi等我设置代码块上的.code60类，字体将是60个字符填充宽度。如果有帮助，我们可以假设宽度总是100％。