Streaming live at 10am (PST)

Tablet mode not working on a tablet


#1

Hey all,

So I spent a few hours this evening fine-tuning the styles and layouts of a finished site, from desktop to Tablet, which in the Tablet Preview mode within Webflow looks exactly as I want it to.

Now, I go to my iPad Pro and view the site — and nothing has changed, it's showing the desktop version.

For the Tablet one, I had done a different footer (visible only on tablet) and a different gallery page where rollover actions and titles were removed and replaced with static titles (again, only visible on tablet), and when I view the site on the iPad Pro, NOTHING I have set in Tablet mode is being shown.

Any ideas why? This would be hugely appreciated...

Thank you!

Steve


#3

Hey, @energidesign! :slight_smile: This is completely expected behavior. Changes to your Tablet layout in the Webflow Designer will only affect browsers having a width of 991 pixels and below. The iPad Pro (12.9") in portrait mode has a width of 1024 pixels (2048 pixels at 2x), which means it's above the tablet breakpoint.

You'll also see the Desktop layout on the 9.7" iPad in landscape mode, as the landscape viewport on the 9.7" is also 1024 pixels wide. :+1:

For specific pixel value information take a look inside the designer to the left of each layout:


#4

Hey there,

Thanks for getting back to me. Yes, I figured that the 991px tablet mode would be the factor here, which annoyingly means I have to change the site footer on desktop also to ensure that on the iPad Pro it looks the same as on a tablet of the allowed size. But that's not the main problem I feel.

For tablet, I created a second version of a gallery (visible only on tablet down), where the thumbnails have the rollovers turned off (on desktop, the thumbnails have titles inside them which appear when rolled over, so the user knows what that gallery shows) and the titles are static on top of the thumbnails so tablet users know right away what the gallery is.

But because of this 991px issue, that tablet only gallery doesn't show on the iPad Pro which, at the end of the day, IS a tablet...

This leaves More than a little frustration because I can't get the functionality needed across the devices.

I could try changing the @media setting in the CSS on the exported code, but not sure yet if the site will be hosted at Webflow instead which means that isn't an option.

If anyone has any more thoughts and wants to chime in, I'd love the discussion :slight_smile:

Thanks so much!

Steve


#5

The media query method isn't going to be entirely effective for larger tablets. The 12.9" iPad Pro and the Surface Book both have landscape resolutions that exceed many non-touch devices (most notably the MacBook or the vast majority of Chromebooks). :worried:

An alternative might be device detection via something like WURFL, then forcing the correct media query based on a hand-picked set of devices. That would actually be really cool—if Webflow gave users the option to force a set list of devices to always display the tablet breakpoint and scale up. :heart_eyes:


#6

This is a very good point! I mean, I know it's first-world problems that I have a tablet whose resolution is larger than most laptops :wink: but this problem affects the user interaction and experience with the website with anyone who has a retina or 2x resolution device.

Webflow, any thoughts or potential integrations here? :slight_smile:

Thanks again for the response, McGuire!


#7

A SOLUTION:

I just thought I would try a different viewport setting, just for the sake of it... and it worked. Setting the viewport's device-width to 990px forces the iPad Pro to render exactly what I was expecting from the Tablet version.

meta name="viewport" content="width=990px"

Not sure if this is the 100% correct solution, but it seems to have worked fine for me...

:slight_smile:


#8

However, I will add — I had to disable it (and just accept that iPad Pro experience as a "tablet" isn't at this time possible...) because setting the Viewport width then upsets the Phone responsive settings also. Lesser of two evils, I guess. Leave it as it was, and NORMAL tablets and iPads, and phones, all respond perfectly (Webflow handles this really nicely), use the viewport setting and mess phones up.

:confounded:


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.