Keeping text on the screen in Android's browser
I'm trying to adapt a Dokuwiki template for personal use. One problem I have is that when I access it in Android's default browser and zoom the text, some of the tool links are off the screen — I have to swipe repeatedly to bring them into view. This is in spite of the fact that the rest of the text wraps fine at its increased size, and it doesn't use absolute positioning (it does used fixed positioning, but only vertically, and my demo below doesn't at all).
In Chromium (and Firefox), resizing the window or the text does not push the text out of view.
I've put together a minimal example that demonstrates the problem. Here's the XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en"
dir="ltr">
<head>
<title>test</title>
<link rel="stylesheet" href="./css_1.css" />
</head>
<body>
<h1>Heading</h1>
<div id="tools">
<ul>
<li>Menu Item</li>
</ul>
</div>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
</p>
</body>
<开发者_StackOverflow社区/html>
...and the CSS:
#tools {
float:right;
text-align:right;
margin-bottom:2.1em;
}
The paragraph of text resizes and wraps normally, the Menu Item text ends up off the screen after zooming.
When you zoom in Chrome or Firefox, that increases the text size independently of scaling the images. The browser attempts to render the adjusted content in the window as-is, adding scrollbars only if needed. The closest analogy to this in Android is called "text size", and can be configured through the Browser app's Settings options menu item.
When you zoom in the standard Android browser, that's more of a "magnifying glass" effect, increasing the visible size of everything in unison, and you will need to pan via gestures to get to everything. The page has not really changed, just as looking at a piece of paper through a magnifying glass does not change the paper or what is written on it.
(unless you train the sun's rays on the paper through the magnifying glass -- the proof of this is left as an exercise to the reader)
It is conceivable that there are some Javascript events that are fired on a zoom in the Android browser, but I would not expect there to be ways to react to zoom via CSS, though you should be able react to changes in text size via CSS.
加载中,请稍侯......
精彩评论