Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Safari not optimized for Pro screen?

C

cschmelz

macrumors 6502
Original poster
Jun 6, 2007
348
113
Is it just me or does Safari just kind of seem stretched out on the Pro when you are using the entire screen? It looks find when you run split view (of course it does since it is just the size of a regular iPad screen.

My hope was to be able to use Safari to run my electronic medical record (ideally with the backordered still pen for ordering tests). When I load my EMR it looks shockingly similar to when it was on the regular iPad...Stuff is nice and big, but I would LIKE to be able to zoom out further to see more data on the screen at once, but I feel like everything is TOO zoomed in.

I dropped dynamic text to it's smallest, no help. What I need is a selection similar to my Retina MBP 13" where I can do dynamic screen scaling and fit MORE on the screen...

Is this just a product of an immature product/software development cycle?
 
  • Like
Reactions: cardfan
It's probably an issue with the coding on the website. The CSS media queries might not be working correctly on the iPad Pro. I'm actually not sure what the viewport size on the iPad Pro is... let me check.

EDIT: The viewport is 1366 x 1024. In contrast, the other iPads would be 1024 x 768.

Is the website you're viewing a VPN only intranet website? It's possible they need to add another media query to take advantage of the new viewport size the iPad Pro provides.

Unfortunately as far as I know, even Android tablets normally max out at a viewport width of 1280 in portrait - the iPad Pro is a new device size that isn't really catered for at the moment for web pages.
 
Last edited:
I agree it's definitely weird full screen in landscape orientation. Super zoomed in like you're looking at you phone, which destroys viewing area along the Y axis. I pretty much only browse in portrait because it's not so bad there.
 
As a web developer, I've been genuinely curious about this myself. It's getting late, but I'm going to add this to my todo list for this weekend.

I'll let you know what I find!
 
Nausicaa said:
I agree it's definitely weird full screen in landscape orientation. Super zoomed in like you're looking at you phone, which destroys viewing area along the Y axis. I pretty much only browse in portrait because it's not so bad there.
Click to expand...

Maybe the server delivers the mobile version of the website. Have you tried requesting the desktop version?
 
Beavix said:
Maybe the server delivers the mobile version of the website. Have you tried requesting the desktop version?
Click to expand...

No, not on the electronic medical record site.... It doesn't have a mobile site. It is there same everywhere.

If you have a Pro open up a website full screen in landscape. Next goto split view 50/50. The website you loaded will basically contain the SAME amount of screen space in 50/50 view as full screen view, just smaller.

In fact my EMR almost looks better in split view than full screen which SUCKS since I really bought the Pro for all the extra pixels with the hope the entire EMR would fit on screen instead of just half and I could use th pencil to chose things from the small pick lists.

Is there hope someone (Chome??) will/can build a web browser that will use the full screen real estate rather than just getting big???
 
  • Like
Reactions: Nausicaa
cschmelz,

I haven't encountered any indication that Safari is behaving in a nonstandard way on the larger screen. Web sites can individually specify the rendered size of the viewport on all mobile browsers using metadata that desktop browsers usually ignore, so it's possible that the iPad Pro would respond differently to particular pages even if a web designer hasn't provided a discrete mobile site, per se.

I've checked out a responsive site of my own which doesn't include this metadata, and it behaves as I'd expect on a larger desktop display.
 
  • Like
Reactions: ZombiePete
cschmelz said:
No, not on the electronic medical record site.... It doesn't have a mobile site. It is there same everywhere.

If you have a Pro open up a website full screen in landscape. Next goto split view 50/50. The website you loaded will basically contain the SAME amount of screen space in 50/50 view as full screen view, just smaller.

In fact my EMR almost looks better in split view than full screen which SUCKS since I really bought the Pro for all the extra pixels with the hope the entire EMR would fit on screen instead of just half and I could use th pencil to chose things from the small pick lists.

Is there hope someone (Chome??) will/can build a web browser that will use the full screen real estate rather than just getting big???
Click to expand...

The website is probably showing you the mobile-friendly, iPad-optimized version. I get that on other sites like Ars Technica.

Up in the top menu bar for Safari you can add a "Request Desktop Site" button that will get you the version you most likely want.

Edit: Did you actually try this yet? I just saw that it was mentioned previously. Sorry for the duplicate suggestion.
 
phillyboy82 said:
The website is probably showing you the mobile-friendly, iPad-optimized version. I get that on other sites like Ars Technica.

Up in the top menu bar for Safari you can add a "Request Desktop Site" button that will get you the version you most likely want.

Edit: Did you actually try this yet? I just saw that it was mentioned previously. Sorry for the duplicate suggestion.
Click to expand...


I did try it, no difference..In fact doing the request causes pulse check to kick me out back to the login screen..If I request desktop site at login screen no difference.

I really don't think that is the issue either as I see other major websites that have similar appearances....
 
cschmelz said:
I cannot give you a URL as it is behind a firewall. I end up using Junos Pulse to access it via VPN.

Specifically it is this vendor however

http://www.picis.com/emergency.html
Click to expand...

Hmmm. That particular website seems to use Weebly for their public facing page at least.

From what I can see, they max out their media queries at 800px - this would be equivalent of iPad non-Pro / Android tablet portrait mode. Again, in contrast, the iPad Pro has a media query width of 1024 in portrait. This means if you have an ultra wide screen it's going to have a lot of whitespace anyway, i.e. try viewing this on Desktop on a large monitor with a resolution of 2560x1440 at least. You'll see the whitespace, and this is actually a website optimization issue (although frankly it's not too big of a concern IMO).

Of course their internal VPN-only website could be coded differently.
 
Last edited:
I think the OPs point is that he would expect to see white space so that the site scales properly in landscape.

Here is another site that just looks cartoon big in landscape. It's what I would expect in split screen mode.

http://www.yesterland.com

*The site is a Disneyland historical tribute.
 
masotime said:
Hmmm. That particular website seems to use Weebly for their public facing page at least.

From what I can see, they max out their media queries at 800px - this would be equivalent of iPad non-Pro / Android tablet portrait mode. Again, in contrast, the iPad Pro has a media query width of 1024 in portrait. This means if you have an ultra wide screen it's going to have a lot of whitespace anyway, i.e. try viewing this on Desktop on a large monitor with a resolution of 2560x1440 at least. You'll see the whitespace, and this is actually a website optimization issue (although frankly it's not too big of a concern IMO).

Of course their internal VPN-only website could be coded differently.
Click to expand...

Yep, it's all websites. Too "zoomed in" in landscape. In split view, they appear more normal. Portrait works too.
 
cardfan said:
Yep, it's all websites. Too "zoomed in" in landscape. In split view, they appear more normal. Portrait works too.
Click to expand...

It's not all websites, for example the Macrumors forums are definitely not "zoomed in".

I actually dug in more deeply into both websites, and Safari is working as designed. Here's what I've found:
  • The public facing PICIS webpage is actually correctly designed. It fits into the iPad Pro's width of 1366 pixels, and will fit any device width (try it on your iPhone). The only limitation is that they force a "maximum-scale" of 1, which prevents you from zooming in.
  • The yesterland webpage has a different issue. It's using a very old web page layout technique that uses tables, and isn't designed to accommodate mobile devices (try viewing it on an iPhone - it will start in a very zoomed out state). In the absence of mobile meta tags, webkit is choosing the "optimal" solution, which is to assume that the viewport is 980 pixels wide.
I've created a crude demonstration to explain these effects at http://output.jsbin.com/wifozo
  • The PICIS website toggles both "width=device-width" and "maximum-scale=1"
  • The yesterland webpage has none of the checkboxes checked. If you change the page width slider to around 730, you get the same effect, i.e. it is a 730 pixel width page stuck in a assumed 980 pixel viewport (this is the default on all older websites)
  • If you check the "user-scalable=no" checkbox, then you're completely unable to zoom out or in.
You can learn more about the technical details here, as well as on other websites such as MDN. Bottom line is - website developers need to fix their webpages to make them work with the way Safari handles mobile pages. Generally this will not be an issue for modern web pages that at least use the combination "width=device-width, initial-scale=1". They will also need the necessary media queries present of course.
 
  • Like
Reactions: ZombiePete
It does not seem stretched to me....for the most part Safari is optimized for this screen...like they said maybe you ran into a mobile site...but everything on safari is flawless and what I'm use to on the latest iPads
 
Sorry for the late reply, but I finally got around to checking this out. I've been most curious about this for github.com. On my laptop, which has a max width of 1440px, it has nice padding on either side of the page. On my iPad Pro (with its width of 1366px), there's no padding, so it fills up the whole screen and looks pretty goofy.

It turns out it's the viewport meta tag that's doing this. You can read about it here:

https://developer.apple.com/library...ontent/UsingtheViewport/UsingtheViewport.html

Using that tag, uou can specify the width of the page, and iOS will force it to fit that size. On every iOS device other than the Pro, this is generally good, as it scales the page DOWN to fit the resolution of the screen. To see this better, check out this image:

defaultwidthcomparison.jpg



On the pro, however, it scales it UP. So on a page that WOULD fit inside the Pro, it scales up the content to get rid of the nice padding on either side.

Gross. I'm going to send in a ticket to Apple to get this fixed.
 
4004786 said:
Sorry for the late reply, but I finally got around to checking this out. I've been most curious about this for github.com. On my laptop, which has a max width of 1440px, it has nice padding on either side of the page. On my iPad Pro (with its width of 1366px), there's no padding, so it fills up the whole screen and looks pretty goofy.

It turns out it's the viewport meta tag that's doing this. You can read about it here:

....

On the pro, however, it scales it UP. So on a page that WOULD fit inside the Pro, it scales up the content to get rid of the nice padding on either side.

Gross. I'm going to send in a ticket to Apple to get this fixed.
Click to expand...

Hmmm... I disagree. I would think that proper responsive design would not force a content width=1020 - pretty bad practice IMO. In contrast, on mobile devices it is using width=device-width, which should be the proper way to do it regardless of device. CSS media queries can then rearrange the HTML elements accordingly as needed.

I would send a ticket to GitHub, not Apple...
[doublepost=1454107855][/doublepost]lol... I always access Github either full screen or half-screen on a 27" monitor. I never realized the entire site utilizes a non-responsive design if accessed via desktop.
 
Last edited:
  • Like
Reactions: 4004786
I've come around – I agree with you masotime. This wouldn't be a problem if GitHub implemented proper responsive web design.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back