Frontend Style Demo Page

I ended up doing this. It works better than I thought: Though it starts on the initial page, the individual

Note that I still need to tweak the dimensions to get it perfect. Right now the scrollbars take up some of the 320x480 window, so it’s not completely realistic. But it works well enough that I can see the results of all my @media queries at once.


  • params = { src: '/my/starting/page }

text-align: center
border: thin dotted black
vertical-align: top

%iframe#mobile-portrait{params.merge({width: 320, height: 480})}
%iframe#mobile-landscape{params.merge({width: 480, height: 320})}
%iframe#desktop{params.merge({width: 960, height: 9999})}