Текст внутри <p>сжимается на мобильных устройствах, в то время как div не

Кто-нибудь знает, что здесь происходит? Я тестировал оперу, дельфина и браузер w770 для Android. (хотя теперь он работает над оперным режимом)

Div не изменяет размер, но текст как-то сокращается, чтобы поместиться на части div. В любом случае, чтобы предотвратить это?

Просто чтобы быть ясным, я пытаюсь добиться в мобильном браузере того же вида, что и версия для ПК.

Как кажется проблема с браузерами, как заставить текст взять полную ширину div? Я попытался установить тэг p на 100% без успеха.

div должен иметь эту ширину и выравниваться влево от страницы.

* Обновление 1: Я попробовал следующий код на галактике s4 (ранее пробовал на s2) и получил ту же ошибку на опере mini и дельфине. Ошибка можно визуализировать в режиме онлайн с помощью операционного мини-симулятора , вам просто нужно разместить файл html где-нибудь.

* Обновление 2: Я считаю, что проблема существует, потому что, когда загружается веб-страница, она загружается с нормальным размером (пикселями), поэтому абзац занимает лишь небольшую часть страницы. Затем страница масштабируется, поэтому весь контент подходит для страницы, но текст не распространяется, он остается в этом начальном малом пространстве.

enter image description here

На Pc, как и должно быть:

enter image description here

Я сократил код настолько, насколько мог:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<meta content="" name="keywords" />
<meta content="" name="description" />

<title></title>

</head>
<body>
<div style="width:1000px; margin-left:auto; margin-right:auto;" >

<div style="float:left; width:758px; background-color:aqua;">
<p>

Random text Random text Random text Random text Random text Random text Random text Random text 
Random text Random text Random text Random text Random text Random text Random text Random text 
Random text Random text Random text Random text Random text Random text Random text Random text  
Random text Random text Random text Random text Random text Random text Random text Random text  
Random text Random text Random text Random text Random text Random text Random text Random text  
Random text Random text Random text Random text Random text Random text Random text Random text  
Random text Random text .
<br />
<br />
Random text Random text Random text Random text Random text Random text Random text Random text  
Random text Random text Random text .
<br />
<br />
Random text Random text Random text Random text  
<a href="#" onclick="location.href='http://www.a.com/a.html'; return false;">
Random text </a> Random text  
Random text .
</p>
</div>
</div>
</body>
</html>

Спасибо.

Ответ 1

Лучше начать применять HTML5 и правильный doctype:

<!DOCTYPE html>

Затем настройте окно просмотра, чтобы его можно было применить:

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

У меня нет Opera Mini для тестирования, но в соответствии с таблицей совместимости он должен работать.

Ответ 3

Возможно, в Webkit может быть объект для увеличения текста, попробуйте добавить css:

  • {-webkit-text-size-adjust: 100%; }

или

  • {-webkit-text-size-adjust: none; }

Ответ 4

Мобильный веб-браузер автоматически масштабирует страницу, чтобы пользователь мог более четко видеть текст. Если вы хотите, чтобы текст не масштабировался, добавьте этот код в <head>:

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

Ответ 5

У меня была проблема, почти такая же, как у Droid Razr (Droid OS 4.1.2) - биржевой браузер. Оказалось, что проблема связана с самим браузером - поврежденные настройки или что-то в этом роде. Переход к настройкам > Дополнительно > Reset по умолчанию > OK устраняет проблему.

Ответ 6

Я обнаружил, что когда я использую

text-align: center;

все в порядке, но когда я использую

text-align: left; 

текст сокращен (браузер Android 4.1)

Нужно исследовать немного больше...

Ответ 7

Попробуйте указать ширину в относительных единицах, например%.

как здесь:

ширина: 100%; для первого div и..

ширина: 75%; для div внутри него