I have a web app that I'm trying to run on an iPad 3. When I pull it up, the app is allowing vertical scroll when it shouldn't be. I've gone through the same process with other web apps without any issues, and am not sure what I am missing this time around.
Inside head element of my html, I have the following meta tags:
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
<meta name="apple-mobile-web-app-capable" content="yes">
In my CSS:
html, body { width: 100%; height: 100%; overflow: hidden; }
Trying to debug this issue in weinre and discovered that the document width and height are somehow equal, when height show be much smaller (in landscape).
$(document).width(); // returns 1024
$(document).height(); // returns 1024
Searching around SO, other answers have been to supply a viewport meta tag, which I'm already doing. Can someone point me to a solution here?
It looks to me like you are using too many properties of viewport that might conflict with each other. Apple suggests to set few of them or one and test in isolation as others are automatically inferred.
Bootstrap in its basic template recommends to set only width and initial-scale.
I would be very careful with maximum-scale or anything restricting user's zooming as it forces the user into uncomfortably small (or large) text.
Okay, for some reason this worked when I removed "height=device-height" from the viewport meta tag. Not sure why since I literally just copy and pasted this tag from another app that worked just fine. Working viewport:
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, target-densitydpi=device-dpi">
Related
I'm at a loss. I don't understand how to use style html and body in conjugation with:
<meta name="viewport" content="width=device-width, initial-scale=1,"/>
to make my website(huskybiz.com) not be zoomed in on load on mobile and to have a min-width of 800 and max-width of 2000. I've been trying for days. Any help greatly appreciated.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
set user-scalable attribute to no (user-scalable=no)
if you assign it to user-scalable=no, it means the website is not allowing the user to zoom in or zoom out.
you can also use maximum-scale=1 it also won’t allow the user to zoom.
Reference:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes
I have a website that I am trying to make mobile friendly. When I get to my forms though when the textbox is selected the screen zooms in when you're done it does not zoom back out. I do not think this is my CSS that is doing this I have a feeling it involves the way you set up your meta tags. Is there a way I can adjust my meta tags to not do that zoom in since its not zooming out? Or have it at least zoom out once the focus is lost.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
If you wanted to remove zooming on the page altogether, you could try adding user-scalable=0 to your viewport tag, like so;
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
But this may not be ideal. From what I can gather, another way to prevent this would be setting the input text of the form in question to be above a certain size, to prevent zooming on the form specifically. For most iOS/mobile devices, that size seems to be around 16px, although this would likely vary between devices.
input {
font-size: 16px;
}
For some reason I can't seem to find help on this from searching the internet... perhaps I'm not wording it well.
I've had this problem come up previously, but for right now it's on this website:
http://merchantbankingresources.com/
You can see in the screenshot that the website is pushed to the left and very narrow. It's on an iPhone 4s.
The proper sizing of the page is controlled by the viewport meta property. Adding something as below to your website's head would scale your website automatically to the device width.
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
After putting it in, you can make your page occupy whole page with width:100%;.
EDIT- The <ul> in your gform is actually causing the problem. It is rendering to a wrong position.
EDIT- Change the .gform_body css. It gives it a left of 500px
Try adding this code in the HEAD
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="cleartype" content="on" />
I thought this was a classic case of the html, body not wanting to stretch, but the issue lies within the page itself.
Here is my website, www.offergrind.com
I made it fully non-responsive but the problem is that if we view it in mobile it is displaying the top left part.
Is there any code such as
<meta name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">
What should i do to make the website to display fit in mobile view ?
Start with this. At minimal, it will make your website fit the device, but everything will be sized down.
<meta name="viewport" content="width=device-width">
You should also look in CSS pre-processors, I was blown away by how many CSS files you reference.
I would get rid of the viewport meta tag altogether. If your website was not designed to be responsive, it will only make things worse. See this for more:
Stop using the viewport meta tag (until you know how to use it)
Use the below meta tag for your website
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
The meta tag above explains everything:
width="device-width" width of the website is equal to device width
initial-scale=1.0 means the website will not scale to fit the device screen
when we set minimum-scale=1.0, maximum-scale=1.0 and user-scalable=0 means user will not be able to scale the webpage (it will turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. )
Basically I have a site at the moment that is width 940px, at the moment I just need this site to be viewable on iPad whilst I begin adding in media queries to tailor the site for each device. Is there a meta tag I can use so that my site scales down when on iPad?
I would use this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1" />
See developer.mozilla.org/en/Mobile/Viewport_meta_tag/.
It sets the width and height to the device's width and height, sets the initial zoom to 1, and the maximum zoom to 1 (therefore making the page not zoomable).
EDIT: If you want the page to still be zoomable, remove maximum-scale=1:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I use this in all my Mobile Sites.
The iPad has a 1024x768 screen. You should be fine before adding in media queries.