Can I switch off web page stretching on the new iPad?

The new retina display is amazing until it comes to web surfing. The new iPad stretched web pages to fill the whole screen scaling images and buttons to the point that look terrible.


Is there a way to tell the iPad or Safari to leave websites their original width?


I understand shrinking pages for phones, and even the older iPads but not stretching, it just makes everything look bad.

iPad, iOS 5.1

Posted on Apr 12, 2012 10:12 AM

Reply
8 replies

Apr 14, 2012 12:57 PM in response to TKDigiCom

If by "stretching" you mean "zooming", Safari for iPad won't let you zoom out more than the width of the page. You can control the zoom level by "pinching" (to zoom out) or "reverse pinching" (to zoom in) within limits.


Regarding the quality of graphics on the web, they've always been made for 1x displays, so on a 2x display the quality will be less. You can try to contact a specific web site owner to ask them to update the images, but it will take a while for image assets to be updated on the rest of the web.

May 16, 2012 1:12 AM in response to Kilgore-Trout

What he is referring to is that instead of displaying images and other elements on web pages at their native resolution, the new iPad (3) is stretching them beyond their native. Whilst this won't bother some people, this should both anyone who appreciates the benefits of a retina display, quality and detail.


I understand that this would make a lot of images rather "small" on the new iPad's screen, however that's how some people want it, and because it is pixel to pixel perfect, the detail will still be visible.


I am a photographer and I visit a lot of photography websites, and being as visually anal as I am, I am too very disappointed when an image is stretched even slightly above its native resolution - and I can visually notice it easily.

May 16, 2012 1:42 AM in response to TKDigiCom

You can use for example Dual Browser ( http://itunes.apple.com/app/dual-browser/id380640600?mt=8 ). To horizontally split, in Settings, select the General tab and, there, tap the „Change screen split mode”. I've annotated these in the following iPad 3 screenshot, which also shows screen splitting in action:


http://dl.dropbox.com/u/13100693/html/042012RetinaHDVideoPlayers/60fps/IMG_0309. PNG


Note 1. If you want to know how you can make characters bigger, let me know – I've written several scriptlets to in/decrease char sizes in a web page.


Note 2. There are quite a few other, „Dual” browsers. They may work equally well (and some of them are considerably cheaper.) I haven't tested them.

May 16, 2012 7:00 AM in response to Menneisyys

Brenton289 is correct, I don't want web pages stretched beyond their native resolution.


I'm ok with a single browser, but if a webpage is only 1000px wide I dont want it to stretch to the whole width of the iPad. Basically I want Safari on iPad to look the same way it (or Chrome) does on my Mac, where no matter if I have the browser window the full 1920px wide or just 1200px the webpage is the same width.


Fore example this webpage is centered in my full screen browser.


User uploaded file



Jul 7, 2012 6:24 PM in response to TKDigiCom

Yep same complaint here. It's an iOS thing because you can't zoom out permanently on anything, not just web pages. The last post, with the picture, adequately describes my problem. I just want to to take full advantage of vertical resolution. I don't care as much about horizontal resolution. The dual web browser solution addresses this to a certain extent, but like I said there's non web apps I use that would benefit from a permanent zoom out feature, such as PDF readers.


I found another post inquiring the same issues, but with no answer yet: https://discussions.apple.com/thread/3894247?start=0&tstart=0

Dec 14, 2012 4:27 AM in response to Farfolomew

Ok, considering there hasn't been any development of this since the iPad 3 came out (which is downright astoninshing considering how big a deal this is and how many people have the device) I thought i'd share with you my cumbersome, but effective, workaround.


Here's how to do it using Safari (this should work on any mobile browser that supports bookmarklets, including Android which shares this same problem)


1. Open mobile safari, and create a new bookmark, preferrably placing it on the Bookmarks Bar for easy access


2. Edit the bookmark. Give it a useful name such as "<Vport 1536>"


3. In the address field, replace the entire field with the following (copy and paste):


javascript:var%20w=1536;var%20v=null;var%20m=document.getElementsByTagName(%22meta%22);for(var%20i=0;i%3Cm.length;i++)if(m%5Bi%5D.name%20==%20%22viewport%22)v=m%5Bi%5D;if(v%20!=%20null)v.parentNode.removeChild(v);v=document.createElement(%22meta%22);v.setAttribute(%22name%22,%22viewport%22);v.setAttribute(%22content%22,%20%22width=%22+w);document.getElementsByTagName(%22head%22)%5B0%5D.appendChild(v);


4. Hit ok and loadup a DESKTOP version of a website to test out


5. Once the desktop version of the site is loaded, select your bookarklet.


At this point, the website MAY autozoom out (particularly, if you've loaded this bookmarklet at least once before on the same tab during this browsing session), or it may appear not to have done anything. If the latter, then MANUALLY zoom out using the two-finger pinch method. When you release, the webpage shouldn't zoom back in, but rather stay zoomed out.


Voila, problem...averted! I won't say solved, because it's still annoying having to do this for EVERY webpage you want to zoom out on, but, alas, it's the only working solution I've found thus far. I'm not overly knowledgable on Javascript, so I don't know what can be done to make this smoother. For instance, it would be nice if the Viewport you selected kept when you used hyperlinks to go to other webpages, rather then now having to constantly click the bookmark for each new page loaded (that's why I suggest putting this on your bookmark bar). Also, it would be nice to not have to manually zoom out (although really you only need to do this the first time while browsing in that tab. After that, it seems to automatically zoom out after loading the bookmarklet). So anyways, if anyone can help me edit the code to fix these annoying quirks, i'd very much appreciate it! My email is farfolomew@gmail.com.


Finally, the example above is using 1536 pixels as the webpage width. This corresponds to the iPad 3's horizontal resolution while in portrait mode. You can easily adjust this by changing the number in the beginning right after where it says "javascript:var%20w=". The resolution on the iPad 3 is so freaking good, you can go as high as 3072 and still barely make out text, hehe. But anyways, you may decide 1536 is too small to read, in which case, i'd suggest 1280. It's near half way between the default size of 980 (see below) and 1536. I find myself using this more often than 1536 to be honest.


In total, I have four bookmarklets on my Bookmark Bar for changing the size: 980 (default), 1280, 1536, and 2048 (for when in landscape mode).


In closing, while this solution is acceptable for me, it's far from an ideal solution. The bigger issue though is, for the life of me, I can't possibly fathom how this isn't bothering more people. With resolutions ever increasing on their mobile devices, it's only a matter of time before people realize the screens their using are just as good as their computer monitor (or better), and should be displaying as much, or more, as their computer monitor does. How long will people be content not taking advantage of these resolutions, but rather continuing to favor crisper, larger text instead of overall screen real estate? I certainly hope some engineers at apple take note of this and do something about it. All i'm asking for is an option to STAY zoomed out. I'm not asking for in depth resolution scaling options like you have on your Mac Book retina!


Anyways, have fun!

-Farfle



*Techy background info I discovered while researching this:


All mobile device browsers, including iOS, use what's called a Viewport when displaying a web site. Think of this as a virtual window your browser draws in which it loads the contents of the webpage in. This Viewport is always stretched to the full dimensions of the device, which in the case of our iPad 3 is 1536x2048 pixels (from here on out, i'll just refer to the horizontal resolution, as that's the only thing that matters. Also, it's always assumed portrait mode).


Now, this Viewport's resolution is NOT equivalent to the iPad 3's 1536-pixel resolution. Rather, it dynamically changes based on the website. That's the underlying difference between a mobile version of a webpage and a desktop version: the mobile version has a smaller viewport to accomodate a mobile device's smaller physical resolution. Now, for a desktop version of a website, no Viewport size is implicitly specified, which means your mobile browser has to pick one since the website didn't. The default Viewport size is 980 pixels, and it's used on ALL iOS devices (it may even be the size used for Android, but i'm not sure).


So, what happens when you view a desktop site on your mobile device? The result is generally a very small and unreadable webpage (duh). The reason for this is your mobile browser is loading the webpage up using a default Viewport size of 980 pixels (since the desktop version of a site doesn't specify one), and then down scales that to fit your device's physical screen size (which for iPhone 4+ is 640 pixels, and iPad 2 768 pixels). Thus, you end up with a properly formatted site in terms of everything being layed out correctly, but extremely small.


So with this default viewport 980 pixels wide, you might notice that's actually greater than the iPad 2's resolution of 768. You're right, the iPad 2 has to do the exact same thing your iPhone does when viewing desktop webpages: scale them down to fit its physical resolution. Not ideal is it?


However, with the iPad 3's 1536-pixel resolution it has plenty of room to fully display all of that 980 viewport. In fact, TOO much! So what does it do? No, it doesn't leave it alone and pad the sides with white space like a regular high resolution computer screen would do, but rather UP scales the 980 pixel Viewport to its 1536 pixel screen. This is why if you loadup the same desktop webpage on an iPad 2 and iPad 3, they'll look identical, in terms of format and how much of the page is visible. The difference will be the iPad 3 will display it a lot more clearly, as it lost no information from having to downsize, and it has more pixels to work with to eliminate alias artifacting with text (actually, pictures MIGHT look worse as they have to be scaled up, but text looks a lot crisper because it's vector based).


For me this isn't acceptable. I shouldn't have to be limited to 980 pixels when I ultimately have 1536 pixels to work with on my Ipad 3. I want the webpage to be SMALLER so that I'll be able to view more VERTICAL content, and won't have to scroll as much. As long as I can READ the text, there's no need for the darn website to be limited to 980 pixels in width. The problem is on iOS (and Android for that matter) you cannot permenently zoom out past the size of your viewport. BUT, if the viewport could be changed, to say 1536, rather than 980, Safari wouldn't have to scale it to the width of the device, and effectivly would show the page already zoomed out--and thus I'd end up being able to see a lot more of the webpage vertically (by virtue of the sides being padded with empty space, just like on your widescreen computer monitor).


So, what does all this crap mean? Simple: in order to permanently zoom out a webpage on iPad 3, you need to tell Safari to load the page in a larger viewport, thus padding the sides of the page with emtpy space. The only way to accomplish this that i've found is by use of bookmarklets. For those who don't know what they are, they're simply a piece of JavaScript code used in place of a bookmark's regular URL address. What happens is when you then load that bookmark, rather than taking you to a new webpage, it executes that JavaScript code ON the current webpage you're viewing. This allows you to do some nifty post-formatting of the webpage, which in our case is exactly what needs to be done to serve up a larger viewport.


Ultimately, the fix should come in the form of a mobile browser that that has a setting to avoid use of Viewport altogether (like regular desktop browsers do) or a setting that allows you to change the default viewport size of 980 to whatever you specify. OR, ultimately the best solution would be to simply allow zooming out past viewports and NOT have the device auto zoom back in to the viewport's width. But I think this last option is inherritantly limited by iOS itself, as this behavior is common in any app you use, not just web browsing.

Nov 9, 2014 6:54 PM in response to TKDigiCom

I just bought a new iPad yesterday. I had the same Internet page stretching problem.

I Called apple support for this problem. They had me reset all settings( in settings/general/reset. Then they had me erase Internet browsing history. Then shut the iPad completly off for 20 seconds, and turn it back on. After these three Steps, I no longer had the issue of stretched out pages on the Internet.I hope this helps.

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

Can I switch off web page stretching on the new iPad?

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.