I developed a web page for PC and I wanted it to be compatible for iPad as well. However I did not do specific additions to my page for iPad compatibility. I only added the meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />
When I view the site in iPad landscape mode, on the page load, it looks good. But when I switch to Portrait mode, the page looks cut off. When I switch again to landscape mode, the page looks cut off still further.
What other practices should I follow to make my page iPad compatible.I’m looking for recommendations/best practices on using %widths and things like that.My elements are currently of maximum 954px. Should I necessarily use % widths for iPad compatability? Any other helpful tips?
initial-scale=1.0 means your page will load ‘full size’ which is too wide in landscape mode. If you use that meta tag, you would usually use it in combination of sizing the page width to the exact dimensions of the screen. Since you are not, I would not use that meta tag at all and let the iPad’s browser load the page normally (the browser will handle fitting it to the screen for you).