Как отобразить код на iPhone с помощью HTML / CSS

Question

По общему признанию, iPhone - не самая лучшая платформа для просмотра кода, но я бы хотел как можно лучше оптимизировать мобильную часть своего веб-сайта для устройства. У меня проблемы с получением кода (в данном случае Java-кода) для правильного отображения.

Я использую теги <pre>, а также немного CSS для визуализации небольшого фона для кода. Это выглядит хорошо:

Однако, если вы прокрутите, чтобы увидеть остальную часть кода, вы получите это:

Текст внутри <pre> отображается правильно, но цвет фона останавливается на ширине устройства. Я пробовал это в симуляторе, в устройстве 3G с версией 3.0, а также в 3G с версией 3.1-beta, и все они ведут себя так.

Это прекрасно воспроизводит в Safari на Mac; только не на айфоне.

Вот HTML:

<code><pre>
String input = readUserInput();  // assume defined elsewhere
int i;

try {
    i = Integer.parseInt(input);
} catch (NumberFormatException exception) {
    System.err.println("You entered an invalid integer: " + exception.getMessage());
}

И CSS:

pre {
    font-weight: bold;
    border: 2px solid green;
    background: #669999;
    padding: 5px;
}

Answer 1

Какая странная ошибка! Я могу воспроизвести его на реальном живом iPhone. Я предполагаю, что это связано с тем, как iPhone обрабатывает настройки области просмотра . Одна вещь, которую вы должны уточнить, это то, какие настройки окна просмотра у вас есть на вашей странице (через метатег). На скриншоте видно, что он меньше, чем размер по умолчанию в 980 пикселей. Я пытался поработать с окном просмотра различными способами, но не смог остановить эту ошибку.

У меня есть один обходной путь, который должен установить параметр ширины в предварительном блоке. То есть:

<pre style="width: 50em;">

Это плохое решение по нескольким причинам; он создает блок с фиксированной шириной, обвивает границы и т. д. Но в результате получается цветной фоновый блок, который шире, чем область просмотра. Может быть, это приемлемо для вас, или, может быть, это основа реального решения.

Answer 2

Я не уверен, что pre принимает атрибут переполнения, но я бы попробовал установить его, если нет, обернуть его в div и сделать фон там, что даст вам немного больше свободы в настройках форматирования. (например, если вы хотите иметь несколько блоков кода с надписями под каждой частью)

Answer 3

Вы пытались установить ширину или минимальную ширину для вашего предварительного блока? Или, возможно, пытаясь использовать другую позицию или атрибут отображения для блока. Можно попробовать переместить его или отобразить: table. Просто некоторые идеи.