MacPro 13.3 = iPad

For some reason, each time my customer loads the website on his Macbook Pro it only loads the iPad version of the site instead of the desktop one. Any idea why this could be happening?

The website: http://gsgpetroleum.businesscatalyst.com/hype/megatel/megatel.html

His laptop specs:

A good way to test what responsive layout is being loaded when is to use Safari's Responsive design mode:

You can see at what breakpoints your layouts are appearing.

1 Like

Yeah, I forgot to mention that my client have some very… uhm… “special” requirements, and he specifically asked to make the website, at least for desktop, to match exactly 1300px wide, no more, no less, and he specifically wanted to have the white borders, he doesn’t want the site to fill the browser screen.

So, even if the 1300px breakpoint could be the problem its something I can’t seem to change for now. But yeah, that feature in safari is something I was missing and its really badass.

If your client’s browser is at 768 pixels wide (the width of a portrait iPad), it appears that the iPad-sized layout will appear – that might be what’s happening.

(edit, didnt uploaded screenshot)

Using the awesome safari responsive feature, seems that, at least for the common laptops this is not a problem it still loads the desktop version:

But this is how it looks, according to my customer, on his 2560 x 1600 Macbook Pro:

Notice how the Menu header its different, thats how you can tell is loading the iPad version.

"Has anyone played around with the Responsive Design mode in Safari 9?"

I can't imagine how anyone could work without it!

1 Like

I don’t think it’s loading an iPad version. (Difficult to tell without seeing what the iPad version is)
Basically, his screen resolution is way bigger than the 1300px so that means that things will show up smaller and a little more spread apart and positioning will be different. Unless, you account for this and use the features in Hype to make it similar on larger screens. Pinning, expand to fill, etc.

To me it looks as if this is the case here. But, as I said without seeing the doc or the iPad version I can’t offer anything more.

Agree, this are the styles:

iPad Landscape:

iPad Portrait:

Desktop view (1300px breakpoint)

As you can see, the desktop version is the only one with that ugly tab in the middle. When loading the site in the Macbook Pro, it doesn’t load the Desktop version since the ugly tab in the middle is missing.

The iPad landscape doesn’t have a phone in it though. I believe that the “ugly tab” is there it just isn’t in the same proportion because everything is shifted due to the available screen width and height being larger. Try looking at your responsive settings and maybe adjusting them to see if it helps with the positioning and resizing.

yeah, its because its animated, sorry, wrong position when I screen captured it. But the button is more squared in the Desktop version while in the mobiles is visible more rounded.

Here is the hype file: https://www.dropbox.com/s/kopt9n4y5pfpccn/test_highres4.7z?dl=0

OK Thanks for the doc. It’s easier to see what’s going on :slight_smile:

I don’t think it’s the doc as everything is working fine when tested and I believe you have mentioned this before. The only other possible explanation I can offer now is that your client has different settings for his display. Even though his machine has a large resolution display perhaps he has made changes in his display settings to only display at 1152 x 720 or 1024 x 640 which would make his maximum width screen size to be less than 1300 which would result in only seeing the iPad version (1024 - 1300 breakpoints)

1 Like

(using the command-plus/command-minus is one easy way to change browser display settings so that pixels are not what one thinks)