Текст всередині <p> стискається на мобільних пристроях, тоді як div не працює

Хто-небудь знає, що відбувається тут? Я тестував на опері, дельфіні і фабричному андроїд-браузері. (хоча зараз здається, що працює над оперою)

Div не змінює розмір, але текст якось скорочується, щоб поміститися на частині div. Так чи інакше, щоб запобігти цьому?

Щоб було зрозуміло, я намагаюся досягти на мобільному браузері той самий вигляд, що й у ПК-версії.

Як проблема, здається, з браузерами, як я можу змусити текст взяти повну ширину DIV? Я спробував встановити тег p до 100% без успіху.

Div повинен мати цю ширину і вирівнюватися ліворуч від сторінки.

*Update 1: I tried the following code on a galaxy s4 (previously tried on s2) and got the same error on opera mini and dolphin. The error can be visualized online using the opera mini simulator, you just need to host the html file somewhere.

*Update 2: I believe the problem exists because when the webpage is loaded, it is loaded at its normal size (pixels), so the paragraph only occupies a small part of the page. Then, the page zooms out so all the content fits the page, but the text does not spread, it stays in that initial small space.

enter image description here

На ПК, як і повинно бути:

enter image description here

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




<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;">

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 .

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 .

</div> </div> </body> </html>

Дякую.

10
Пробували на iPad2 і Android 2.3 запас браузера (Motorola Droid2 Global), без проблем. Які працівники ви використовуєте? Чи не встановлено екзотичний плагін?
додано Автор ern0, джерело
Наведений вище код прекрасно працює для мене на Safari Mobile і Android Browser.
додано Автор Matt Coughlin, джерело
@MattCoughlin Завдяки Matt. Я повинен був сказати, що я спробував цей код на андроїд.
додано Автор riseagainst, джерело
@ ern0 Немає плагінів. Фондовий андроїд, дельфін, опера міні. Працює над оперою і хромом. Спробуйте зменшити масштаб, щоб переконатися, що він працює.
додано Автор riseagainst, джерело

7 Відповіді

Краще почати застосовувати HTML5, а відповідний тип:

<!DOCTYPE HTML>

Потім налаштуйте область перегляду, щоб його можна було застосувати:

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

У мене немає Opera Mini для тестування, але згідно з таблицею сумісності він повинен працювати.

2
додано
Посилання на моє запитання, просто натисніть на "opera mini". Дякуємо за відповідь, але, здається, це не спрацювало.
додано Автор riseagainst, джерело

I had a problem nearly identical to this on Droid Razr (Droid OS 4.1.2) - stock browser. It turned out to be a problem with the browser itself - corrupted settings or something. Going to Settings > Advanced > Reset to Default > OK fixed the problem.

0
додано
Не зовсім те, що сталося тут, але ви маєте рацію, на опері, є варіант, який називається "обгортка тексту", що при зміні результату не змінюється і на дельфін його називають "автоуподобання вмісту". Отже, це підтверджує проблему з веб-переглядачами, як переконатися, що вміст доставлено на 100% сторінки?
додано Автор riseagainst, джерело

Спробуйте вказати ширину у відносних одиницях, наприклад,%.

як тут:

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

ширина: 75%; для div у ньому

0
додано
Працює над оперою, сток-андроїдом і хромом, але не на дельфінах
додано Автор riseagainst, джерело

The mobile web browser scales the page automatically so that the user can see the text more clearly. If you want to prevent the text from scaling, add this code in the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">
0
додано
Цей точний код знаходиться в чужому відповіді. Не вийшло.
додано Автор riseagainst, джерело

Можливо, це зміна тексту в Webkit, спробуйте додати css:

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

або

  • {-webkit-text-size-adjust: none; }
0
додано
Пробував без успіху, спасибі хоч.
додано Автор riseagainst, джерело

Додати

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

На вашу сторінку.

Here is a good read about the viewport meta tag: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

0
додано
Я буду досліджувати це трохи більше. Я спробував, і він збільшує розмір вмісту, тому спочатку я не бачу порожнього простору, але внизу є смуга прокрутки. Просто збільшуючи масштаб, я можу побачити, що порожня частина div все ще існує. І це проблема для мене, у мене є вміст після цього div.
додано Автор riseagainst, джерело

Я знайшов, що коли я використовую

text-align: center;

все нормально, але коли я використовую

text-align: left; 

текст скоротився (браузер Android 4.1)

Необхідно вивчити трохи більше ...

0
додано