Streaming live at 10am (PST)

An option to turn off responsive layout


#1

It'd be nice to have a WYSISYG option to turn off responsive for selected layouts - e.g. turn it off for tablets but keep it for mobile phones.


#2

As a workaround, could you wrap your page content in a div and set its width to a pixel value forcing the responsive content to fill the fixed width for that media query and use percentage based for the rest? I use a similar approach to control larger media queries and set a max width, but I think it could work the other way around as well.


#3

I tried this out on a test project today and setting the width of the parent wrapper to exceed the media query width does work as expected affording fixed width content for any media query. By default allows scroll on the page and afford pinch zoom and fit capability on iOS. Super simple, but the initial view exceeds page bounds of course.

What functionality are you wanting by making the site non-responsive? Are you just wanting to enable pinch zoom and higher resolution to support it?


#4

What functionality are you wanting by making the site non-responsive?
Are you just wanting to enable pinch zoom and higher resolution to
support it?

I think this is what I want. I mean, what happens when you need to view a non-responsive web site on a table - you zoom in and out, while the site's layout remains the same as for desktop. So I think what you said is just what I had in mind.


#5

The main thing you lose is that the initial view is not fitting to screen width and the initial position is top left and completely unpredictable for the number of devices that exist. I think are better methods based on your objectives to accomplish that in general page anatomy and construction. I am looking into something similar where page regions, images and articles are focused using double tap as it is a built in property / behavior on some devices. I don't know much about best practice, support or approach - just beginning. That is why I was interested in your post.


#6