I am building a SPA. I have
in index.html, and I've got a few media queries such as:
#media screen and (min-width: 640px){
.sidebar {
width: 20%;
float: left;
}
}
When I open the site in Firefox, I'm shown a selection of device sizes, and when I choose the smaller sizes, the RWD shows up. The sidebar slides down, images are smaller, etc. All great. The problem is when I open the site on a mobile phone (android), it's as if I haven't done any of that. Google doesn't recognize the RWD changes either. Am I missing something?
Keep in mind that resolution on phones is getting so ridiculous that old-style media queries are basically useless for determining device. Of course, my 5-inch phone doesn't actually have 2560 pixels on its screen, but it uses a "device pixel ratio" to treat each logical pixel as 2, 3, 4 or even more pixels.
So, accordingly, we can target that metric to determine devices. Try changing your media query to something like this:
#media screen and (min-device-width: 640px){
.sidebar {
width: 20%;
float: left;
}
}
To target mobiles and devices and basically everything properly use this media query:
#media handheld,screen and (min-width:600px){}
I would also personally use max-width over min-width it makes more sense on downsizing and code grouping but that's probably my personal preference.
The #media screen bit does work - however the host I was using wasn't allowing it. I've since moved my website, and it's mobile friendly. Just thought I'd leave this here in case anyone else runs into this problem. The hosting was previously done through my school, so I don't have a lot of info to share about it.
Moving to a proper host (godaddy, although I don't actually recommend it, since they don't have any server side scripting) fixed the problem without any other changes being made.
Related
I know I know it is probably only a workaround but I am only a Wordpress amateur and currently need a quick solution, even if a dirty one...
My Wordpress site has a side bar. Unfortunately I have a problem where on android (and probably IOS as well - didn't check) the side bar takes almost half the width of the mobile screen, and in windows, on a pc\laptop screen it looks ok.
So, I narrowed in the custom CSS the sidebar width and now I've got the opposite problem. Looks find on mobile and bad on the PC monitor.
I am using Helium theme.
This is the css value I use to set the sidebar width:
width: calc(100% - 100px);
I checked "Browser and Operating System Finder" plugin but failed to understand how to utilize if for my needs.
I guess the pros have better solution, but even a quick and dirty will be welcomed for now.
An example of the sidebar(filled with button widgets) overlapping the background items on PC screen:
Thank you.
You shouldn't be looking at determining what to display based on device, but rather on characteristics, and for this I would recommend css media queries https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
This allows you to change css based on size and other factors e.g
#media (min-width: 300px) and (max-width:480px) {
/* styles here */
}
You can even add things such as orientation
#media (orientation: landscape) { ... }
The reason this is better than just looking for a specific device e.g iphone is that if Apple released a new iPhone that had an even bigger screen, your standard stylesheet might work, or it might not. Media queries will allow you greater flexibility going forward.
Today, i discovered The resolution CSS data types and i don't find a real usage for this. Has anyone ever used this functionality or any examples use case ?
One real-world example usage is when performing printing of web document:
#media print and (min-resolution: 300dpi) { ... }
The above media query will display given styles when printing DPI is set at minimum of 300dpi.
If you have some content that requires at least 300dpi (artist / photographer etc.) you could require the viewer to have at least a 300dpi screen. If the viewer does not, you can put out a message saying they don't have a screen with high enough pixel density to view the content.
Imagine you’re displaying images, via CSS, in a same-sized element:
.my-image {
background-image: url(path/to/image.jpg);
/* Exact dimensions of image */
height: 200px;
width: 200px;
}
This will look fabulous until you see this on a higher DPI screen. Incidentally, many smartphones and tablets do have higher DPI screens. With a media query, you can serve higher quality images.
#media (min-resolution: 72dpi) {
.my-image {
background-image: url(path/to/image-large.jpg);
}
}
Basically progressive enhancement. Users with lower DPI screens will run at you, hold you in their arms, and thank you for saving precious bandwidth.
I've seen other questions, but no answer has helped me yet.
I have set a media query to:
#media only screen and (max-device-width: 767px) {
/* css here */
}
which I want to make the page on phones render the same in both landscape and portrait.
on my 2 available iphone 5's - a 5 and a 5c, portrait works great, landscape totally ignores it.
i've tried the specific landscape orientation tags, and that also fails.
i've also tried setting the max width to 1500px just in case of some retina thing - and that also fails in landscape.
i've run the css through lint - and that didn't find anything all that bad, even. so i think the css is ok (if not lint-perfect).
the site is locked for now till i hear back from my client - so posting a link won't help. But has anyone else seen this issue, and is there any fix out there? When i get back home tomorrow i can try an old Android phone and see what that does. But for now it's driving me crazy!
Do you have to use max-device-width? because if you change it to use max-width you will keep all the styles up to that size.
The difference between them two is max-device-width if you view the site on a browser and shrink it down it doesn't become responsive but if you use max-width it gives the site a responsive feel when shrinking the browser.
#media all and (max-width: 767px) {
css in here
}
I prefer using max-width.
The only case I can think of we should use max-device-width rather than max-width is when we need to keep something consistent even when browser window has been re-sized.
I'm currently making a webpage and testing it in chrome works fine, but in Firefox - it is zoomed in.
This is because my DPI in Windows is set to 125%, and Firefox detects this, and adjusts every webpage accordingly.
However, my webpage is not meant to be viewed at such a zoom level, the images aren't made to be displayed that big, and hence it looked blurred/pixelated. The general layout of the page is messed up too, because everything is so big.
Now, this doesn't affect most people - as their DPI would be at 100% in Windows. However, I want it to be the same on all browsers.
I've searched and have found solutions as for the user to disable this "feature" - but I want to be able to disable it from my website - so it doesn't look wrong to the user in the first place.
e.g. one post says:
1) Type about:config in address bar
2) search for layout.css.devPixelsPerPx
3) change value of layout.css.devPixelsPerPx from -1.0 to 1.0
But that isn't what I'm looking for.
Is there any way to disable this from CSS/HTML/anything?
Thanks.
You could easily let your website address users with settings at higher zoom levels by including a media query like:
#media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
only screen and( -o-min-device-pixel-ratio: 5/4 ),
only screen and( min-resolution: 120dpi ),
only screen and( min-resolution: 1.25dppx ) {
body {
font-size: 1rem;
}
}
See this article for an extended explanation and why the cleaned up solution of the media query is sufficient for a broad browser support: IE9+, Fx3.5+, Opera9.5+, Webkit Browsers Chrome and Safari, both Desktop and Mobile.
Your could try something like this below. There are some caveats using this, but for some situations
it is worth using it.
#media screen and (min-resolution: 120dpi) {
/*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/
body {transform: scale(0.8);transform-origin:top left;width: 125%;height: 125%;}
}
Commented /*body....*/ example scale may be easier to understand yet worse, f.e. because
scaling should be done based on transform-origin css rule top left edge. Then things can be rendered better especially in Chrome.
if you use width: 125%, your RWD css should react differently to changing browser sizes on account of this from what you expected when screen ratio was 100%.
And you might reasonably accept this - this is RWD and the difference is 25%. But some people might want to adapt their css like this:
#media screen and (min-width: 1000px)
you also need to adjust:
#media screen and (min-width: 800px)
probably not 1250px but 800px like I did.
Edge, Chrome, FF do pretty good. IE 11 rendered the worst yet not hopelessly.
There are some problems in FF (not edge, chrome) when expanding select fields - solution css select.
Some borders can can be visible some dissapear on FF (maybe not edge, chrome)
There can be some issues not mentioned here like when you use carousel like owlcarousel on your page.
Yet I think it is greater probability to save more time with this example tested still too little.
You have to use exact scaling like 0.8 for 125% screen for your images to be rendered as sharp as possible.
I noticed that when switching to different dpi resolutions using ctrl +/i in a desktop browser and for sure using multitouch gestures in mobile browsers, a browser changes dpi too, so any solution using #media min/max-resolution may not work as expected. What is needed in css is to read system resolution not a browser. However as i see this resolution change doesn't take place like then when someone changes browser size manually or by rotating a mobile device.
Thank you Tatsuyuki Ishi for correcting some errors of my answer.
This frustrated me too, but luckily there is a solution.
Navigate to about:config. (Click accept on any warnings telling you to be careful with advanced features)
Search for layout.css.devPixelsPerPx and change its value to 1.0 and your issue should be fixed.
It was something implemented in Firefox 22.
I did this way, zoom works better than transform, it doesn't make fixed elements absolute:
#media screen and (min-resolution: 120dpi) {
body {zoom: 0.8;}
}
Set it to 1.25: that keeps the user interface larger, but resets the website to 100% pixel mapping.
I've been looking at a few websites, in order to construct my own websites, and I've noticed that when you zoom in past a certain percentage, the website emulates a mobile display. No horizontal scrollbar appears, and everything fits onto the page, and only the page length increases.
Here are a few example websites - https://generalassemb.ly/, http://learnlayout.com/, http://dev.opera.com/
I'm not sure how they implement this is their design, and have searched the web for an explanation.
If possible, could you walk me through it with example CSS?
Thanks
This has nothing to do with the zoom, but with the current width of the window, ( At least in your examples, the same happens when you change your browser's window to a smaller size ) they are most likely using CSS media queries to apply conditional styles depending on the width.
Sample ( from first google result http://css-tricks.com/css-media-queries/ )
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
body {
background: #ccc;
}
}