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

Question

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

我已经看过很多关于视口的文章（并且我确实在标题中使用了“ viewport”元标记），但是我不知道如何更改div的宽度，因此文本/图像始终包裹在视口的宽度上。 似乎我需要使用javascript捕获某种大小调整事件，并调整div的大小，但这超出了我的专业知识。 谢谢！

Answer 1

有趣的问题。 我将分两个步骤进行处理：

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

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

因此，例如，如果您使用了jQuery Mobile和Touchy插件，您会想到以下内容：

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