Wrong css on mobile devices - css

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" />

Related

My website is not displaying correctly on mobile

i just uploaded my first website online but it is not displaying the mobile version on my iphone, it is working perfectly on my desktop computer when i try to lower the size of the internet navigator.
any suggestion ?
Make sure you have next line in the <head></head> tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Iphone image zoom error css

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">

bootstrap 3 zoomed out in firefox

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" />

Disable Zoom on Website

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?

Media queries not working in smartphone

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

Resources