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">
Related
I've implemented Media CSS in my website and when I resize it in Chrome-Devtools it adjusts fine.
But when I try it on mobile it shows like in a full desktop page.
Here's my website:
dinf
when resizing the page in Devtools:
When simulating mobile
Can you please explain how can that be?
Just add the following line to the head tag of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It allows elements and fonts to correctly scale on mobile devices. I suggest you to read this article about it.
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">
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 trying to create a mobile friendly version of my website, to make my website responsive to a smaller screen size and scale accordingly.
I've created some media queries, that behave correctly in a browser when resizing on a desktop.
On my iPhone, safari just shrinks the entire website but still maintains the aspect ratio of the full sized site. How do I get the media query to be observed? have I missed something?
Here is a link to a sandbox which I am trying to get working correctly - any help or suggestions are appreciated:
http://www.preview.brencecoghill.com/
Do you have the meta for view port in your html?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More info here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
I think you'll find a warning in Chrome with ; instead of ,
This should work just fine:
<meta name="viewport" content="width=device-width, initial-scale=1">
I just experienced the most bizarre thing after troubleshooting this same problem for a day. Something to try if all else fails...
My pages were perfectly responsive on my laptop during development but not on my iPhone, iPad or Samsung. I finally discovered I had to put a comment line after the DOCTYPE statement and before the html lang statement, like this:
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
Finally, my pages were responsive on the mobile devices. Weird!