Im trying to make my website responsive, however Im having a little problem.
It works fine on my browser. If my browser is full screen then it looks how it should, and if I make the browser smaller then the media queries work perfect.
However if i then load onto a samsung galaxy S3 or ipod touch, it does not. It looks like the regular website, only crammed in smaller to fit the screen. It does fit 100% of the screen, however hot at all like it should.
I have searched through here for an answer. I have tried changing the widths, I have tried changing px to em. I have tried being less specific and just write for portable devices. Still doesnt work.
Can anyone help?
This is my media query..
#media only screen and (min-width: 150px) and (max-width:600px)
Try adding this between your head tags:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I'm applying media queries on my project , but when I`m resizing the browser , it doesn't work.But when I resize it from the developer tool (inspect element) it works...It sounds ridiculous but I'll show you with images.
In the following picture. I've applied media query for my menu-bar. As you can see , when I resize my browser , it doesn't work.
but when I resize the project from the developer tool , it works... I've applied only <meta name="viewport" content="width=device-width, initial-scale=1"> for the media queries.
The second issue is the following. Is there <meta> tag for tablets viewports?
Now my Media Query works on all mobiles , but on tablets doesn't. I've tried to reach some answer for mu issue but I didn't find anything...
My thoughts are that its because your query only applies to the device. If you were to try something like:
#media screen and (min-width: 480px) {
background-color:red;
}
Try that, but to be honest, I would think about introducing a style framework like Bootstrap.
It takes most of the headache around queries away. Also, it's great because you generally want to cater to mobile screens first, and Bootstrap does this pretty well by default.
Unfortunately mobile phones have such high screen resolutions that my website comes it far to small. It adapts perfectly when zoomed in on a desktop browser but unfortunately on mobile browser the webpage viewport size does not actually change once zoomed. To try and solve this I have already gotten a script that detects a mobile user agent and then sets the body width to 500px, this looks about the perfect width but unfortunately the mobile browser does not set its viewport to 500 even after I set the meta for viewport 500 and this results in my webpage rendering in the corner of the browser. Once zoomed in it looks fine though but that is not what I want. My site is in some way similar to nokia.com and I want it to behave in the same way on a mobile client.
Can someone please tell me what the correct procedure is for doing something like this because I am in no way a proper web developer, I am just doing this to learn.
Here is my meta:
<meta name="viewport" content="width=500,initial-scale=1,maximum-scale=1,user-scalable=no">
You need to write conditional CSS rules for smaller browser sizes.
One example:
#media screen and (min-width: 768px) {
.item1{}
.item2{}
}
Here is a site I just found through a quick google search that should be able to get you started at least. http://www.conditional-css.com/usage
Good luck with your learning!
It is better to use #media queries (available is css3)
Something like:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) /* You can change this value per your requirements */
{
/* Your custom styles for mobile device */
}
Try this
<meta name="viewport" content="width=device-width", maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0 />
and use the media query to target all the screen size
http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport
Hope this helps you
Finally solved it! It seems the reason I was having so much trouble is because the mobile device I was testing in was a Windows Phone 8 device and apparently WP8 does not really respond well to the viewport meta tag. This is easily solved by the addition of a MobileOptimized meta tag.
I know it sounds a silly question but I've searched through stackoverflow, and most questions discussed about view switching bug when iphone switched from portrait to landscape.
Here is my question.I have designed portrait view for iphone, I manually redefined the width of most divs. The site now works fine in portrait view. Now I am about to develop landscape view, I just want the site be displayed fit into the size of the screen and keep the format as it is displayed in normal browsers. No more design for separate css style sheet for each divs for this view. Just make it be displayed the same format in normal browser but smaller to fit into the size of landscape screen on phones.Is it possible to just set something so that the whole site can be fit into the size?
#media screen and (min-device-width: 481px) and (orientation:landscape){
//what can I put here to make the whole site fit into the landscape screen?
}
If I have not misunderstood your question, you need a viewport first
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and then just set your wrapper's width to 100%, or try a grid system.
I have being tearing my hair out trying to get a fix for this, the site is built with Twitter Bootstrap and is responsive, and works fine on all devices apart from iPad & iPad mini in portrait where it is always wider that the devices screen.
I know that there is a problem on device rotation with iOS devices, but this is on page load in portrait.
Any advice would be great, I am not sure if it is a problem with Bootstrap or something I have done.
http://bodysgallen.ws-django.co.uk
you may need to make a new set of responsive CSS to fit that screen size.
EG you have something like this #media (max-width: 979px) & #media (min-width: 1200px). You might need to add another one in between to handle the size of the iPad on portrait.
I'm not sure if the problem is related specifically to iPads. Something odd is happening with your grid at a viewport of 769px - 945px (approx). It's not responding correctly.
If you check validation results for the page there are a number of errors which aren't too important but at the end there are two I would fix, an unclosed container div and a body tag that was already closed. http://bit.ly/11fKdhG
While these 2 errors aren't necessarily the cause of the problem, I think you want fix them first.
Hope this helps!
I'm using the Semantic Grid System to build a responsive site. However, something isn't quite right with the media queries that should obviously kick in once it hits a particular screen size.
I'll reference what i mean with their example on the website : if I view this on my iPhone for example, given that it is supposed to adjust to a single column structure on a mobile device, it still throws out the web version of the page. That is true for both Safari and Chrome on my iPhone. However, if I use the RWD bookmarklet to check it's appearance at different resolutions it appears as expected for the mobile resolution. Also, ironically, if I resize the page in Safari on my desktop it also adjusts accordingly once I get down to the approriate screen size, but not in Firefox.
The media query that it uses once it hits 720px is
#media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
.column(12);
margin-bottom: 1em;
}
}
and I might be wide of the mark here but I think that must be the issue. But given that this is directly from the semantic.gs website I don't think I have the expertise necessarily to question their own code.
Any idea what the problem might be?
The behavior that you describe can be the result of not using the 'viewport' meta tag in your markup:
<meta content="width=device-width" name="viewport">
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/