My website has 4 media queries, one for mobile (fluid), one for tablet (720px), small screens (940px) and big screens (1140px). Mobile and tablet will show a mobile menu, small and big screen will have a normal menu which will show the sub-menu on hover.
The Queries:
< 768px // Mobile
> 768px and < 1024px // Tablet
> 1024px and < 1200px // Small screens
> 1200px // Big screens
The Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
The problem
iPad will show Small screens (hover menu) because the width is 1024px. Tablet and mobiles (or touch devices) should only show the mobile menu regardless of there width, because touch devices can not handle :hover.
Solutions:
Neither one of the underlying solutions are the way I want it. I am looking for a pure CSS version to detect either a mobile devices or a touch device. Off course one of these solutions will be applied if there is no CSS option.
Modernizr - It can detected if a device is mobile or tablet and it can detect if it is a touch device. Downside is that you have to add a package which will result in an extra http request and it will make the website 'slower'. An other downside is that it will not work when Javascript is disabled.
Javascript - Use Javascript to detect all userAgent for mobile and tablets. Downside is that it will not work if Javascript is disabled and you have to keep an eye out for new devices / userAgent
CSS (device-max-width) - Well this seems to be the solution, but I am afraid of conflicts when I have a (device-max-width: 768px), (device-min-width: 768px) together with my normal desktop queries (min-width:1024px) and (max-width: 1200px) and (min-width: 1200px)
The proper solution for your problem exists in the CSS specifications, but has not been implemented yet:
https://drafts.csswg.org/mediaqueries/#hover
#media (hover) {
/*styles for devices where the user can hover*/
}
#media not (hover) {
/*styles for devices where the user cannot hover, such as mobiles and tablets*/
}
Until browsers get around implementing it, you're stuck with nasty workarounds such as browser sniffing.
Related
So our website is in its last stages before we make it live, however we have just noticed when we were checking mobile responsive everything was working fine, until we rotated the mobile to landscape view and it displayed the same styles as on a desktop and the responsive media wearies weren't working!
our responsive code is as follows:
#media screen and (max-width:600px){
.stats{
display:none;
}
}
can anyone help please?
A landscape device ratio is bigger than 600px. If you use chrome, dev tools, when re sizing the viewport it shows you exactly the amount of pixels which is visible.
Off the top off my head, i would say you need to change your media query to;
#media screen and (max-width:787px){
.stats{
display:none;
}
}
add
<meta name="viewport" content="width=device-width, initial-scale=1">
between head tags so you can get correct width from mobile devices (https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag) and change your media query as
#media screen and (max-width:767px){
.stats{
display:none;
}
}
for mobile devices (phones)
I want to hide specific elements on my page for tablet and mobile devices. So I used:
#media (max-width: 991px) {
.popup_overlay {
display:none !important;
}
}
Problem appears when I open the web page from my mobile which has a resolution 1920x1080 and the element appears but its not displayed correctly as the div is not optimized for small screens.
Any suggestions how to do this the proper way?
You can add to your media query to target very high pixel density phones and tablets with min-resolution and device-pixel ratio.
See more about that here: http://css-tricks.com/snippets/css/retina-display-media-query/
I'm creating a landing page and I need it to have slightly different height in IE for desktop and modern IE (in Windows 8.1). Can I do that with media queries? I tried binging and googling but couldn't find anything.
Thanks!
Short answer: no.
Media queries will help you if you need to respond to the viewport size. For example
#media screen and (min-height: 900px) {
/* rules for tall viewports */
}
While you can be sure that IE metro/modern will be the full height of the display, you can't necessarily differentiate that from IE desktop in full-screen mode (i.e. F11), and of course your page may be viewed from a variety of devices with different display dimensions (including rotatable devices in portrait or landscape orientation).
I have coded a responsive website, in which I have CSS media queries to detect the screen size(pixels) of the device the user is navigating with.
Just standard medias. Example:
#media (max-width: 1199px){
/*code*/
}
#media (max-width: 991px){
/*code*/
}
#media (max-width: 767px){
/*code*/
}
When I test my website with my mobile, which is a Samsung Galaxy S4 with 1920x1080 pixels my website shows me the mobile version, which is in this case the #media query with a max-width of 767px.
I understand that most things would be too small to read or be seen if my mobile respected exact measures like 12px font size.
So my question is, how do I control which version of my website is shown on high resolution devices, because pixels media queries aren't working in my case.
#media (max-width: 1199px){
/*code*/
}
The max-width property in the media query works a little different. It is not the resolution of the screen. It is equivalent css pixel.
Here are a couple of articles.
A pixel identity crisis.
A pixel is not a pixel is not a pixel.
moz media query page.
If you want to target device resolution you should use
#media all and (max-device-width: 320px) {
}.
max-device-width:This property measures the device-width. If you write css using media query using this it will get a little complex (mobiles tabs and even desktops can have 1080p resolution screens). In order to target device resolutions you might have to look into properties like -device-pixel-ratio , orientation and device-height to give better control of layouts
The problem might be that you didn't include a viewport meta-tag
<meta name="viewport" content="width=device-width">
I created a website without using mobile theme.
If i open my website in my smart phone browser, it resizing my theme.
I mean, It automatically reduce the size to my mobile browser.
For example...I already mention my text box size in my CSS code. The mobile screen pixel size is differ from desktop machine screen pixel size.
My Question is, how it reduce the screen resolution to mobile view?
please clear my doubt.
Thanks in advance.
Do you mean to resize your sites content for the handheld device? If you have a fluid layout (with % instead of pixels for widths) use:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Further reading: http://developer.android.com/guide/webapps/targeting.html
Either there might be some media queries defined within your stylesheet like
#media handheld, only screen and (max-width: 1024px)
{
//Style goes here
}
Which is a style defined for screens having maximum width of 1024px.
Another possibility is, styles may be defined fully in percentage. So that the styles are changed according to the window size.
Again there might be some scripts used in your code to resize. All depends on the code that you are using. There are variety of methods which fits the view according to the screen size.
if you want scale it in browser tell it in css.And use all width in % values
eg:
#media handheld, only screen and (max-width: 767px) {
//mobile version css
}