enter image description here
i am working on a project, the screen size i want to work on is 1366x920
the problem is when i set it to this size the zoom turn to 93% or other value
i change it back to 100% the size change to other than height changes to something else other than 920
i tried this solutions :
selecting "Restore to defaults" in the Toggle device toolbar menu.
selected "Desktop (touch)"
List item
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
turned off the "Auto-adjust zoom".
i saw an old post but never been answered correctly, or the answers didn't solve the problem for me
any idea how to fix it ?
Related
When I open my page on mobile, it is automatically zoomed in to probably about 125%. It looks fine when you zoom out, but obviously I want it to open at 100%. I have this:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
but was wondering if it's possible that it could be a different issue. My body width and height are currently styled at 100%, but I tried switching to auto and that did not help the zoom effect.
this question has an answer here: Webpage starts zoomed in on mobile devices
<meta name="viewport" content="width=1000">
I had the similar problem and just adding height to the meta tag solved my issue
<meta name="viewport" content="width=device-width" height="device-height" initial-scale="1" , maximum-scale="1" />
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. )
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">
Is there a possbility to disable the initial zoom you get when viewing a page with your smartphone?
I don't want to disable zoom, I'd just like the user to view the entire page (=> width) when loading it and not just a small rectangle.
I've tried several solutions suggested by others but none of them worked for me.
Okay well that was easy. I slightly tweaked a solution I found from Google. Here's the only code that worked for me:
<meta name="viewport" content="width=960; user-scalable=yes;" />
It sets the default zoom to 960px (change to the width of your page) and still allows the user to zoom in/out.
EDIT: It looks like it allows zoom on the default Internet Browser (SGS4) but it disables zoom when using Google Chrome.
Try add this to the head of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes", target-densitydpi=device-dpi />
Where initial-scale is how much you want it to be initially, maximum-scale is how much the user is able to zoom, and user-scalable is whether or not they are allowed to zoom.
The target-densitydpi=device-dpi is needed for mobile devices with a high dpi (or resolution) such as the Samsung Galaxy S4 but it is added to the end of the meta because devices such as the iPhone does not recognize it.
I haven't tested this myself on an SGS4 because I do not own one but if you want to be specific on the initial-scale of the device, can try adding media="(device-width: 480px) and (device-height: 800px)" after user-scalable where 480px is the viewport width of the SGS4 and the 800px is the viewport height of a SGS4.
So it should look like: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes", media="(device-width: 480px) and (device-height: 800px)", target-densitydpi=device-dpi />
Add this to your head <meta name="viewport" content="width=device-width, initial-scale=1.0" />
Read up here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
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.