即使在缩放时,如何才能在移动浏览器上获得流畅的换行符？

Question

即使在缩放时,如何才能在移动浏览器上获得流畅的换行符？

我有一个非常简单的网页,只有一列文字.以下是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%;
    }

    /* ?---------------- */

}

/* ?---------------- */

目的是:

1. 不使用固定字体大小,但要遵守用户在浏览器设置中选择的默认字体大小

2. 如果浏览器窗口的宽度非常大,则不要使行太宽(字符太多).相反,在左侧和右侧留出空间.

3. 如果浏览器窗口的宽度很小(=没有足够的空间在当前缩放级别显示当前字体大小的41em文本),则使用换行符确切地说明浏览器窗口的整个宽度(边距很小) (100% - 90%)÷2 = 5%左侧和右侧),避免水平滚动.

4. 如果用户放大或缩小,则换行符会正确调整.因此,即使用户非常放大,也不需要水平滚动,因为线的长度不比浏览器窗口宽.

这适用于桌面浏览器.但移动浏览器依赖于视口.他们声称有一个大约800像素的视口而不是真正的浏览器窗口宽度(这是"布局视口" - 与真正的"视觉视口"不同 - 请参阅http://www.quirksmode.org/mobile/viewports2 .html详情).因此,对于移动浏览器,我已经添加<"viewport" content="width=device-width, initial-scale=1"/>了HTML和

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

在CSS中.现在,目标#1,2和3也适用于Firefox Mobile.但目标#4没有.在放大或缩小时,最近的Firefox Mobile上的换行符不会改变.(有趣的事实:在我原来的Android 2.3.6标准浏览器上,它可以工作.)我想移动浏览器上的布局视口宽度是<meta>在读取标签后确定的,并且此布局视口的CSS像素宽度不再更改用户放大或缩小(与桌面浏览器相反,在缩放时采用其视口).由于它max-width: 90%;是相对于视口(因为这是周围的容器),因此当放大或缩小时,换行符不会再更改.尝试使用JavaScript显示一些DOM值的http://ryanve.com/lab/dimensions/.在桌面浏览器上运行此站点时,您window.innerWidth会在放大或缩小时看到更改.如果您在移动浏览器上执行相同操作,则window.innerWidth放大或缩小时的值不会更改.据我所知,这种行为似乎也是现代移动浏览器和移动网页的标准行为.这似乎是对移动浏览器开发人员的刻意选择(他们希望能够显示旧的,桌面优化的非响应性网页),但缺点是您只能使用虚拟"布局视口" ".

据我所知,CSS中没有与真实"视觉视口"大小相关的测量单位,而不是虚拟的"布局视口".

所以我的问题是:

1. 我想知道是否有任何干净且符合标准的可能性,一个网页可以在移动浏览器上使用(缩放+流畅线路中断),就像桌面版本一样？

2. 如果存在这样的可能性,那究竟该如何工作(首选没有JavaScript)？通过计算"视觉视口宽度"÷"屏幕宽度"并且相应地采用视口,是唯一可能是在移动浏览器上估计缩放因子(本身就是我知道不能在JS中跨浏览器访问)的脏黑客吗？

Answer 1

试试这个CSS：

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

这应该避免使body宽度超过 41em，但在100%其余时间保持不变。它还应该将其居中。

请参阅JSFiddle.net 上的此示例。

截图：

宽于max-width：

少于max-width：