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.
Related
Here is the result when i reducing browther width to 740px. No scrollbar;
Same width but in chrome device toolbar
Now scrollbar appears.
This happened because i'm using negative right margins in some blocks, but i also using
body { overflow-x: hidden }
to prevent scroll. It works perfect until i turn on chrome device toolbar. What is the reason of this behavior? Should i don't use negative margins?
I was having a similar issue, and found an answer that may help you here.
For me the issue was the Media queries I was using looked like this:
#media only screen and (max-device-width: 600px) {...}
The -device- part of the selector, ensures your CSS is only being applied to mobile devices. Consequentially, the chrome device toolbar is used specifically to test CSS on mobile devices, which is probably why you are seeing the css applied properly there, but not when you resize your browser window on its own.
Try removing -device- from your media queries to instead look like this:
#media only screen and (max-width: 600px) {...}
Which should apply your CSS changes on both mobile devices and desktop.
Also make sure you have the following code in your HTML header, to ensure the viewport is configured properly:
<meta content="initial-scale=1.0, width=device-width" name="viewport">
Hope this helps!
chrome tool is for mobile device testing. it actually display mostly same in mobile device. without chrome tool it will display for desktop browser compatibility.chrome tool
so chrome tool actually gives the view mostly same as mobile device.
for mobile view testing it's better to use chrome tool for responsive mode.
chrome tool uses User Agent.
The User Agent Type, or Device Type, setting let's you change the type of the device. Possible values are:
Mobile
Desktop
Desktop with touch
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.
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">
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'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/