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
Related
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">
As from the title, I don't understand why the media query works on emulator device on Google Chrome and it doesn't work on a real mobile device.
Html meta tag
<meta name="viewport" content="width=max-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Css:
#media screen and (min-device-width:640px) and (max-device-width:767px){...}
Actually I've set up the min and max resolutions from 640/768/850/1024 for mobile devices screen resolution, but it seems be an error, cause .... I don't understand yet
You should apply device width in meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
The CSS should be like the following and check:
#media screen and (min-width:640px) and (max-width:767px){...}
When I use WordPress Admin Panel in a Mobile browser such as iOS Safari or Android Chrome it allows me to pinch to zoom. When I checked the HTML I see that the below script is in the <head> which in the past has worked for me to prevent the user being able to scale.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Am I missing anything else here?
Thanks
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
It was missing
, user-scalable=0
I'm working on a responsive, Bootstrap 3-based design. When I resize the browser window on my desktop, everything behaves as expected, but when I went to look at it on my iPhone it doesn't collapse the menu as it should, among other things.
http://www.craftonhills.edu/Testing/ksimonso/Mobile_Site_Page
You need to add the viewport tag to your header:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
You're missing the viewport meta tag within your <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
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" />