I'm developing a mobile site for the first time and i'm trying to create a responsive design.
So far i'm having a lot of trouble with the viewstate settings. Mostly on Android but also some on iPhone.
I'm using these settings:
And i'm also using this in my CSS (just to be sure):
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
It works perfect most of the time on my iPhone. But sometimes when i change to landscape and then back to normal, the resolution of the page gets smaller. And sometimes it stays the same (as it should).
On the Android phone it works perfectly both in landscape and normal modes. Here my problem is, that sometimes when i refresh the page, it seems like the mobile doesn't read the viewport settings at all. It just looks like a normal webpage that isn't optimized for mobile.
Anyone have an idea about what i'm doing wrong here?
EDIT
i also tried to add the meta viewport tags (i don't know why my code doesn't show up in this post, but that doesn't Work either).
You could start by simplifying and rechecking your code.
In the head of your page make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If there are additional viewport tags, remove them for now.
For the media queries in your CSS use
#media (max-width: 767px){ /* adjust viewport width as req'd */
.selector{ ... }
}
and remove the the other # tags you've used (eg #-ms-viewport)
Good luck!
Related
I have added a media query to my code and it works fine when I resize the window in my browser but when switching to the mobile view it doesn't work the way I want it to work. What am I doing wrong here?
The browser view:
The Mobile view looks like this:
And, when I resize the window in my device it looks like this (Is what I am trying to achieve in the mobile view) :
--
Below is the media query trigger for this :
#media (max-width: 770px) {
#title {
text-align: center;
}
.title-image{
position: static;
transform: rotate(0);
width: 70%;
}
}
I don't know what to do here. I am following a course on udemy and they didn't mention this or I may have skipped that part by mistake. And I watched it again but I still am stuck here. It would be a great help if someone could point me in the right direction.
You probably need a viewport defined in the header of your HTML Doc.
This will tell the website what size it should be. It probably thinks it should render Desktop-View. Use this:
<meta name="viewport" content="width=device-width, initial-scale=1" />
I am trying to get this working but somehow its not working in mobile. when i use chrome tool to overrides the screen size, it works fine. i am not sure what i am doing wrong. please help
#media screen and (min-device-width : 320px) and (max-device-width : 480px) {
.container .backgroundImage { display: none; }
}
There is a background image when viewed in browser. s i would like to remove that image when viewed in mobile BUT its not working somehow.. please help
=============
TESTING ON IPhone 3G, 4, 5, Android Galaxy Nexus
#Andy is right, double check your device-widths, or you could always just use min-width so you don't have to know every device width.
Regardless make sure you have a viewport tag, like <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Fantastic - forgot the viewport too!
Fot all:
Just add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in your head
I know this is an old post, but I recently had an issue like this. I ended up fixing it by removing the CSS media query from the main CSS stylesheet, and entering the specific needs for mobile on the html style section instead. Don't know why it worked, but it did.
Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
Thus this worked for me:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
So I made a noob developers mistake and made the standard web page before the mobile version. So naturally when I open my Web page via mobile it's completely messed up. I can write a mobile css file and link it how ever I'm
Wondering if anyone knows of any black magic html or css formating I can append to my files as a fix.
I've manipulated viewport contents
Display width and #media but the solution eludes me.
Again I'm new but committed so thanks in advance.
You can configure your file by using this CSS
#media only screen and (max-width: 720px) {
body {
background-color: lightblue;
margin: 0px;
}
}
The 720px is the average size of most smartphones. You will need to add this meta tag to your html pages as well
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this helps
The easy way would be to move all your desktop-specific code into a min-width media query that looks like this:
#media screen and (min-width: 1000px)
Where 1000px is wherever your website needs to switch to mobile styling. This way, all your desktop CSS will be applied down to your first breakpoint. In this example, once you get below 1000px your desktop-specific CSS will stop being applied and your mobile CSS can take over.
Place your mobile CSS outside of all your media queries. Once the desktop CSS stops being applied, the browser will fall back to the "default" mobile CSS.
What's the best way of simply 'shrinking' a site to fit on to an iPad, while making it fully responsive when it comes to mobiles?
Here's my viewport tag:
<meta name="viewport" content="width=device-width">
I had hoped that the following media query would enable the whole 1060px wrapper div to be displayed by forcing the device to 'zoom out' thus displaying all, like a mini version of the desktop display
#wrapper {
background: green;
margin: 0 auto;
width: 1060px;
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
body { min-width: 1080px; }
wrapper { background: red; }
}
The media query itself works (wrapper background turns red on iPad), but I still need to zoom out to view the whole page.
However, if I change to my viewport tag to:
<meta name="viewport" content="width=1080px">
I get the desired result, but this is no good since the mobile version needs to be fully responsive. So am hoping there's something I can add to the media query to achieve it.
Sure I'm missing something very obvious here - and seem to remember this technique working in the past - any help appreciated!
Many thanks in advance!
EDIT:
It seems this has been raised before, same issue, and yet no solution:
How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?
I've just completed a mobile site for a client, and I've mainly focused on the website's lightness and responsiveness. I haven't worked on redirecting the website because it's still a work in progress BUT all the vital components have been done.
Now if you view the website in your computer and resize your browser, you'll see how it changes according to the viewport's width. But I tried viewing it in my smartphone (Samsung Galaxy S2) and I end up seeing the whole website squished into the available viewport.
Why is this happening and what do I do to make it work?
Thank you very much for your time!
Mobile browsers won't know what to do unless you specifically instruct them.
The viewport metatag is essential when designing responsive layouts. To fix this problem, simply add the following tag to your website's <head>:
<meta name="viewport" content="width=device-width">
If you feel that you need to zoom out a tiny bit more (I personally prefer this), you can also make some small tweaks to get a cool look:
<meta name="viewport" content="width=device-width, initial-scale=0.7">
Have fun,
Adam.
Check your CSS. You haven't closed your curly brace. or you have typo error.
/* =Responsive: Small screen to tablet & IPAD
-------------------------------------------------------------- */
#media (min-width: 768px) and (max-width: 991px) {
.navbar .nav li a {
padding-right: 5px;
pading-left: 5px;
}
example css.