How can I get liquid line breaks in mobile browsers even when scaling?

Question

How can I get line breaks in mobile browsers even when scaling?

I have a very simple web page with one column of text. Here are the relevant parts of CSS:

/* ✂---------------- */ body { /* To avoid problems with some older browsers, that do not calculate * relative values correctly without this statement. */ font-size: 100%; /* ✂---------------- */ /* Center the content and leave a margin at the left and at the right. */ margin-left: auto; margin-right: auto; /* ✂---------------- */ } /* ✂---------------- */ @media not print { body { /* ✂---------------- */ /* Do not put too many words in a single line: */ width: 41em; /* Avoid horizontal scrolling, and leave a small margi * at the left and at the right. */ max-width: 90%; } /* ✂---------------- */ } /* ✂---------------- */ 

Goal:

• Do not use fixed font sizes, but follow the default font size that the user selected in their browser settings.

• If the width of the browser window is very large, do not make the lines too wide (too many characters). Instead, leave space on the left and right.

• If the width of the browser window is small (= there is not enough space to display 41 m of text in the current font size at the current zoom level), use line breaks exactly for the entire width of the browser window (with a small margin (100% -90%) ÷ 2 = 5% on the left and right), avoiding horizontal scrolling.

• If the user zooms in or out, line interruption adapts correctly. Thus, even when the user is very scalable, there is no need for horizontal scrolling, because the line length is not wider than the browser window.

This works great on desktop browsers. But mobile browsers lie around the viewport. They claim that they have a viewport of about eight hundred pixels in size instead of the actual width of the browser window (this is a "layout viewport" - different from a real "visual viewport" - see http://www.quirksmode.org/mobile/viewports2.html ) So, for mobile browsers, Ive added <"viewport" content="width=device-width, initial-scale=1"/> to HTML and

 @viewport { /* 100% of viewport's width */ width: 100vw; zoom: 1.0; } 

in CSS. Now goals # 1, 2, and 3 also work on Firefox Mobile. But goal number 4 does not. Line breaks do not change on recent Firefox Mobile when scaling or scaling. (Satisfactory fact: on my old standard Android 2.3.6 browser, this works.) I believe that the width of the layout viewport in mobile browsers is determined after the <meta> been read, and this layout looks through the width of the CSS pixel does not change anymore when the user zooms in or out (unlike desktop browsers that use their viewport when scaling). Since max-width: 90%; refers to the viewport (since this is the surrounding container), line breaks no longer change when scaling or scaling. Try http://ryanve.com/lab/dimensions/ , which displays some DOM values ​​using JavaScript. When you launch this site in your desktop browser, you see that window.innerWidth changes when zooming in or out. If you do the same in mobile browsers, the value of window.innerWidth does not change when scaling or exiting. As far as I can see, this behavior is also standard behavior on modern mobile browsers and mobile web pages in general. This is apparently the deliberate choice of mobile browser developers (they also want to show old, desktop optimized, insensitive web pages), but the disadvantage is that you can only work with a virtual “view layout”.

And as far as I know, in CSS there are no units that relate to the actual size of the "visual viewport" instead of the virtual "layout viewport."

So my questions are:

• I wonder if there is any clean and standard feature for a web page to get this (scaling + line break) working on mobile browsers like on the desktop version?

  / li>

• If possible, how exactly can this work (preferably without JavaScript)? The only possibility is a dirty hack that estimates the scaling factor (which, as far as I know, is not available for viewing in the JS browser) in mobile browsers, calculating the "width of the visibility screen" ÷ "screen width" and choosing the viewport accordingly?

Answer 1

Short answer: impossible. (But there is a workaround.)

Long answer:

Apparently, it is not possible to have dynamic resizing of the layout view window in mobile browsers.

Quirksmode gives you an idea of ​​the different viewports (layout viewport and visual viewport): http://www.quirksmode.org/mobile/viewports.html http://www.quirksmode.org/mobile/viewports2.html

It seems that the deliberate choice of mobile browsers does not adapt the size of the layout viewport when scaling.

There are some attempts to bring scaling and viewing processing to CSS (replacing the ugly Meta-Viewport tag in HTML):

https://drafts.csswg.org/css-device-adapt/#zoom-desc http://www.quirksmode.org/blog/archives/2015/09/a_new_device_ad.html

But even if it is implemented by browsers, it still will not give control over what happens with the size of the layout viewport during scaling.

Temporary solution. Make two buttons or links named “more” and “less” on the web page. Use them to invoke JavaScript (ECMAScript) and resize text. The simplest case: the size of all content depends on the font size of the <body> element; if so, you just need to change this font size. Code:

 <!-- The CSS is assumed to apply "display=none" to the elements with class="no-print" when used for printing. --> <p class="no-print"> <!-- Some text size tools. The CSS is assumed to apply "display=none" to the elements with id="textSizeTools". So the text size tools are by default invisible and do not take any space in the default rendering. --> <span id="textSizeTools"> <span class="linkStyle zoomInCursor" onclick="javascript:resizeText(true)"> [größer] </span> – <span class="linkStyle zoomOutCursor" onclick="javascript:resizeText(false)"> [kleiner] </span> </span> </p> <script> /* document.body.style.fontSize is empty – though "font-size=100%" is set in * the CSS. We initialize it here with the value "100%", that * corresponds to our CSS entry . From * now on, the value is available in ECMAScript. */ document.body.style.fontSize = "100%"; var resizeText = (function () { 'use strict'; var step = 0; return function (bigger) { if (bigger !== true) { step -= 1; } else { step += 1; } document.body.style.fontSize = 100 * Math.pow(1.2, step) + "%"; }; }()); /* If the browser is scripting-enabled, than this script will be executed * and the text size tools will become visible. If the browser is not scripting-enabled, * than this script will not be executed and the text size tools will stay hidden. * This is intentional, because without scripting, the text size tools would not * work, and it is not good if the user can see buttons and links that * do not work. The same is if this script does not work because some * of the commands do not work in the current browser: The script cannot * be executed until here, so the text size tools will not be made * visible. */ document.getElementById("textSizeTools").style.display = 'initial'; </script> 

Answer 2

Try this CSS:

 body { max-width: 41em; /* up to 41em in width */ width: 100%; /* set width to 100% up to 41em */ margin: 0 auto; /* center it */ } 

This should avoid having the body wider than 41em, but keep it at 100% the rest of the time. He also needs to focus it.

See this example at JSFiddle.net.

Screenshots:

More than max-width :

Less than max-width :