it's possible with jquery or metatag remove the automatic resize in my website when i visit it on ipad? Is there a way to preveni this action of safari ipad?
I've come across the metatag "viewport".
I use it to strictly define the size of mobile websites and prevent scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
By changing the width I expect you can force your website to a given width on all devices.
By querying the device using Javascript navigator.useragent you can restrict this to just iPad.
if (navigator.userAgent.match(/iPad/i)) ...
Related
I developed a website. The layout is fine in desktop. But it is not responsive. I tried for mobile with media queries like,
#media only screen
and (min-device-width: 320px) and (max-device-height: 640px)
{
.....
}
I am using chrome development tools and make changes in the site according to the size 320 x 640. Now the problem is fine in simulator but not in the actual mobile.
Help me to find the solution.
The symptoms you describe suggest that you may not have a viewport metatag in the head of your page, so double check this first.
What you want is something like
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
More about viewport meta tags
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Due to the fact that user-scalable=no means we do not let the user zoom in or out of the page. Then why do we need to use initial-scale=1.0 and maximum-scale=1.0? Is it necessary to use them?
Your intuition is correct, maximum-scale=1.0 is unneeded since the page can't be zoomed anyway. Setting minimum-scale=1.0, maximum-scale=1.0 is a common pattern that's almost equivalent to user-scalable=no. Almost because some browsers will load the page at a scale such that all content width is visible (e.g. Chrome on Android does this) so the user may start off at a scale that's not 1.0 and can't zoom. However, adding initial-scale=1.0 forces the zoom to 1.0.
Mobile Safari is making some fonts bigger when I am rotating the phone.
That's is driving me crazy and I can't get rid of this behavior.
Read about -webkit-text-adjust-size and tried it with all possible combinations but it doesn't seem to work. Is there anything new added in iOS9?
Have you tried the META Viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">
I am working on a website: www.sc1.online-folio.com
for mobile and tablet devices I want to show this site 100 zoomed out (or maybe a little more) so user can see full site at first glance and zoom in the area he wants to view.
I am using this meta tag to zoom out
<meta name="viewport" content="width=1100" initial-scale=1.0, minimum-scale=1.0" />
I set the width 1100 so the website look a little zoomed out for better viewing of slider area. This is all working fine on android devices but on ipad and iphone the site is zoomed like this: http://www.responsimulator.com/?url=http%3A%2F%2Fsc1.online-folio.com%2F and no changes in meta properties are working.
So guys can you tell me what exactly I do to control the zooming on iphone and ipad devices.
You have written the attribute incorrectly, replace the quote after width with a comma.
So that:
<meta name="viewport" content="width=1100" initial-scale=1.0, minimum-scale=1.0" />
Becomes:
<meta name="viewport" content="width=1100, initial-scale=1.0, minimum-scale=1.0" />
But to answer your question, viewport is the thing!
I am having a problem finding the right viewport meta tag to use for a responsive site while restricting user scaling.
Currently I am using:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
I am getting some really weird issues on my iPad2. Upon orientation change, the layout for the previous orientation, including elements that should be hidden by media queries, is taken and posted over-top of the correct layout.
I appreciate any help.
Thanks,
just this and nothing else, remove the rest
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">