Wide Website not rendering correctly in iPod/iPad

Inactive

Anonymous on November 29, 2015 at 11:41 am #3070

I have a website that is a little wider than normal (1300) and it displays great in Android and on PC web browsers. On Apple products, though, the edges are cut off. I have used the VIEWPORT snippet to make it work on Android/PC browsers but cannot get the right combination to make it work on Apple products.

Code that currently works for Android/PC:
<meta name=”viewport” content=”width=1300″>

Code snippets that I’ve tried to get to work on Apple but have failed:
<meta name=”viewport” content=”width=1300,initial-scale=1.0″>
<meta name=”viewport” content=”width=1300,initial-scale=1.0,user-scalable=0′”>
<meta name=”viewport” content=”width=device-width”>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=0′”>

Is there any help or suggestions that you can throw my way? I can put code in to separate the browsers and use one ViewPort for Apple and another for Android/PC, but I can’t get one to work on Apple.

Thank you in advance!
Kirk

Inactive

Anonymous on November 30, 2015 at 8:32 am #3082

I guess I’m not understanding the comment about using BBCodes. Could you please elaborate? The entire website is in ASP/HTML on a Microsoft platform. Is the suggestion to recode the website? Isn’t there a way to render the website properly on Apple platforms?

Thank you in advance!

Keymaster

David Payette on November 30, 2015 at 2:51 pm #3085

Hey Google User,

Just to clarify quickly, the BBCodes thing is on my website. It’s a way to format your posts in the text box when you post in this forum. I’m not suggesting you recode your website. 🙂

Have you tried the exact code I suggest?
<meta name="viewport" content="width=device-width, initial-scale=1">
I noticed this code that you pasted in has an extra hyphen before the closing quotes – maybe that’s the issue?
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=0′”>

Hope this helps! Also, let’s move this discussion to the comments section on my post. This forum is generally meant for basic iPhone questions, not the technical help you’re asking for. Or maybe I’ll create a new section of the forum for the technical questions.

Anyway, thanks for your awesome question and I hope it helps!

Let me know how it works out,
David P.

Inactive

Anonymous on November 30, 2015 at 5:47 pm #3090

Thank you, David for your reply. Much appreciated.

Unfortunately, the change did not have any effect. Truthfully, I believe that the extra single quote at the end was introduced when I tried to simplify the code for the forum here…. this code is actually inside of script and looks like this:

document.write(‘<meta name=”viewport” content=”width=device-width, initial-scale=1″>’);

document.write(‘<meta name=”viewport” content=”width=1300, initial-scale=1″>’);

I have tried both of the above and they have no effect. So you can see that the extra character was introduced when I tried to remove the “document.write” aspect of the META tag since it didn’t matter. So you think that the option for “user-scalable=0” matters? I have removed that from the template that I had….

The website is: “www.jackofallshades.com” – it is 1300 px wide. You can view it just fine on your laptop and your Android – but the two edges are cut off within Apple products….

Any additional help/thoughts are appreciated,

Kirk

Keymaster

David Payette on December 21, 2015 at 2:00 pm #3205

Hey again Kirk,

I took a look at your website, and I believe the meta tag needs to be placed in the <head> of the website, rather than in the <body>. Move it up there and let me know if it helps.

Thanks again for writing,
David