I designed the web interface. It looks normal on the phone. The iPhone seems to be zoomed in as well. How can I fix.
I try -webkit-background-size:cover but it doesn't execute.
add this meta to your head;
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I've designed a bootstrap 3 site and had tested it exclusively with chrome v40.
I then opened the site with Firefox 36. The layout was zoomed out and had gone all awry but after reducing the zoom to 80% it looked just like it did on chrome.
How can I handle this?
Try to add this to your index
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
I wanted to disable zooming on my Webpage.
Therefor I used this:
<meta name="viewport"
content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
This works just fine on my iPhone but when I try this with my LG Optimus 4x, I am still able to zoom!
Does anyone know a solution to this problem?
I am having strange issue. I completed a website and was using screenfly from quirktools to see how it would appear on tablets and smartphones..... it look fine
When I viewed the site on a smart phone or tablet in real, it was showing the site in desktop version ... media queries are not working ... I tried chrome, firefox, opera all on my phone but non of them is showing my site in mobile version.
Friends can you tell me what can possible be wrong ?
I am using simple media queries in my css file
Did you set a meta tag for the viewport? Something like:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Place this meta tag in between
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
You can also Try out this meta tag which will make your media Query work on all size of devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Thanks
Hi I just started develop applications for mobile devices, Have the next trouble. This site: http://dimax.co.il/development/test-ding/OscarWilde/#/menu dispalyed correctly on PC browsers, but on Safari on iPhone 4S, it should be displayed full screen but it much less then full screen. All css you can see there. Thanks for help.
Ensure you have view port set in your head section
<meta name="viewport" content="initial-scale=1.0">
A more complete answer for mobile sites would be:
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />
I am working on an ipad application.I am using asp.net framework with HTML5 and mobileJquery. Is there anyway to do this?
Thanks
If you are looking to add pinch zoom, you need to have a viewport tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
The old recommended way was:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
More information on this here: http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/
Also, another similar post here: javascript event for a mobile pinch/zoom action
Pinching can be affected by the user-scalable and maximum-scale values of your view port meta tag. Try the below line and let me know it works for you or not.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.6,user-scalable=yes">