网站在不同平台上调整大小

Question

我正在使用Masonry和Magnific Popup创建一个网站。我的目标是让这个网站在不同的设备上做出响应。

我已经在桌面上调整了浏览器的大小以预览它，它在桌面上调整得非常好。但我手机的实际外观却截然不同。

在调整大小的浏览器中看起来像什么：

iPhone上看起来像什么： What it looks like in iphone http://media-cache-cd0.pinimg.com/736x/f3/86/9b/f3869b476e6fc31338965a2f6689aa02.jpg

看起来整个布局在手机中向左移动。在ipad / mini中也会出现类似的问题。 任何建议都深表感谢。

Answer 1

目前，YouTube视频正在弄乱页面宽度。尝试添加一些jQuery以使youtube宽度响应，例如：

  $('iframe').attr('width',$( window ).width());
  $('iframe').attr('height',$( window ).height());

但严重的是，这不会解决所有问题。你应该学习Foundation或Bootstrap。