Safari not optimized for Pro screen?

Discussion in 'iPad' started by cschmelz, Dec 17, 2015.

  1. cschmelz macrumors 6502

    Joined:
    Jun 6, 2007
    #1
    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?
     
  2. masotime, Dec 17, 2015
    Last edited: Dec 17, 2015

    masotime macrumors 68000

    masotime

    Joined:
    Jun 24, 2012
    Location:
    San Jose, CA
    #2
    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.
     
  3. Nausicaa macrumors 6502a

    Joined:
    Jan 11, 2007
    #3
    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.
     
  4. jmeas macrumors regular

    jmeas

    Joined:
    Jun 30, 2015
    Location:
    West Philly
    #4
    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!
     
  5. Beavix macrumors 6502a

    Beavix

    Joined:
    Dec 1, 2010
    Location:
    Romania
    #5
    Maybe the server delivers the mobile version of the website. Have you tried requesting the desktop version?
     
  6. cschmelz thread starter macrumors 6502

    Joined:
    Jun 6, 2007
    #6
    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???
     
  7. Starfia macrumors 6502

    Starfia

    Joined:
    Apr 11, 2011
    #7
    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.
     
  8. masotime macrumors 68000

    masotime

    Joined:
    Jun 24, 2012
    Location:
    San Jose, CA
    #8
    Can you name this site? Or at least give us the URL / address?
     
  9. phillyboy82 macrumors regular

    phillyboy82

    Joined:
    Oct 27, 2015
    Location:
    Not from Philly
    #9
    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.
     
  10. cschmelz thread starter macrumors 6502

    Joined:
    Jun 6, 2007
    #10
    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
     
  11. cschmelz thread starter macrumors 6502

    Joined:
    Jun 6, 2007
    #11

    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....
     
  12. masotime, Dec 18, 2015
    Last edited: Dec 18, 2015

    masotime macrumors 68000

    masotime

    Joined:
    Jun 24, 2012
    Location:
    San Jose, CA
    #12
    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.
     
  13. shortcut3d macrumors 65816

    Joined:
    Aug 24, 2011
    #13
    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.
     
  14. cardfan macrumors 65816

    Joined:
    Mar 23, 2012
    #14
    Yep, it's all websites. Too "zoomed in" in landscape. In split view, they appear more normal. Portrait works too.
     
  15. masotime macrumors 68000

    masotime

    Joined:
    Jun 24, 2012
    Location:
    San Jose, CA
    #15
    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.
     
  16. jamesrick80 Suspended

    jamesrick80

    Joined:
    Sep 12, 2014
    #16
    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
     
  17. jmeas macrumors regular

    jmeas

    Joined:
    Jun 30, 2015
    Location:
    West Philly
    #17
    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:

    [​IMG]


    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.
     
  18. masotime, Jan 29, 2016
    Last edited: Jan 29, 2016

    masotime macrumors 68000

    masotime

    Joined:
    Jun 24, 2012
    Location:
    San Jose, CA
    #18
    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...
    --- Post Merged, Jan 29, 2016 ---
    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.
     
  19. jmeas macrumors regular

    jmeas

    Joined:
    Jun 30, 2015
    Location:
    West Philly
    #19
    I've come around – I agree with you masotime. This wouldn't be a problem if GitHub implemented proper responsive web design.
     

Share This Page