[英]Fit element to viewport width when zoom
I have a div that contains text and images. 我有一个包含文本和图像的div。 I want to allow the user to pinch-zoom to change the size of the text/images, but I don't want the display to ever require horizontal scrolling (ie, regardless of the zooming, I want the div to fill the viewport's width).
我想允许用户捏缩放以更改文本/图像的大小,但是我不希望显示器需要水平滚动(即,无论缩放如何,我都希望div填充视口的宽度)。
I've seen lots of posts about the viewport (and I do use the "viewport" meta tag in the header), but I don't know how to change the div's width so the text/images always wrap to the viewport's width. 我已经看过很多关于视口的文章(并且我确实在标题中使用了“ viewport”元标记),但是我不知道如何更改div的宽度,因此文本/图像始终包裹在视口的宽度上。 It seems like I'd need to catch some sort of sizing/zooming events using javascript and resize the div, but that's beyond my knowhow.
似乎我需要使用javascript捕获某种大小调整事件,并调整div的大小,但这超出了我的专业知识。 Thanks!
谢谢!
Interesting question. 有趣的问题。 I would approach it in two steps:
我将分两个步骤进行处理:
Detect the pinch zoom event with jQuery Mobile. 使用jQuery Mobile检测捏缩放事件。 You'll either need to write your own function or use a third-party plugin to detect the pinch zoom.
您要么需要编写自己的函数,要么使用第三方插件来检测缩放。
An event handler that sets the div
width equal to viewport width. 将
div
宽度设置为等于视口宽度的事件处理程序。
So if you used jQuery Mobile and the Touchy plugin, for example, you'd come up with something like: 因此,例如,如果您使用了jQuery Mobile和Touchy插件,您会想到以下内容:
$( '.mydiv' ).on('touchy-pinch', function() {
$( this ).css( "width", $( window ).width());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.