缩放时使元素适应视口宽度

Question

我有一个包含文本和图像的div。我想允许用户捏缩放以更改文本/图像的大小，但我不希望显示需要水平滚动（即，无论缩放如何，我都希望div填充视口的宽度）。

我看过很多关于视口的帖子（我确实在标题中使用了"视口"元标记），但我不知道如何更改div的宽度，以便文本/图像始终换行到视口的宽度。我似乎需要使用javascript捕捉某种大小调整/缩放事件，并调整div的大小，但这超出了我的技术范围。谢谢

Answer 1

有趣的问题。我会分两个步骤来处理它：

1. 使用jQuery Mobile检测缩放事件。你要么需要编写自己的函数，要么使用第三方插件来检测缩放。

2. 将div宽度设置为等于视口宽度的事件处理程序。

因此，例如，如果你使用jQueryMobile和Touchy插件，你会想到这样的东西：

$( '.mydiv' ).on('touchy-pinch', function() {
        $( this ).css( "width", $( window ).width());
});