I am making one project to react js and CSS. For making it responsive I am using the media query.
But after adding all the CSS and media query the media query is not working in the safari browser of phone and pc. Please, anyone, help me or suggest me how can I fix this issue.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
Related
The website was working absolutely fine a few months back. Suddenly no iPhone is reading a single media query within the css file. I have done the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Included in my html file.
/* Iphone 6 plus portrait & landscape */
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
Included in my CSS file
Tried the following:
#media all and (min-device-width : 414px) and (max-device-width : 736px) {
and (-webkit-min-device-pixel-ratio : 3)
and (min-resolution: 401dpi)
and (device-aspect-ratio:16/9)
Nothing.
I checked that the CSS file is loading.
When I check the site via Chrome, on my Windows PC, in the iPhone 6+ resolution it looks perfect. But the client, as well as every single iPhone simulator I have tried, is showing none of the media queries. I do not actually have an iPhone, but the client does.
Can anyone please explain how this could be happening? What am missing? Please help.
So apparently the solution was to add (max-width) / (min-width) alongside every max-device-width and min-device-width. This made the query:
#media only screen and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait),
only screen and (min-width: 414px)
and (max-width : 736px) and (orientation : portrait) { }
This is working on the simulator, will test further and add more if required.
I am new to media queries and I have the following problem. I need to fit this easy layout (www.spiaggiati.it/antani/) for smartphones and tablets in particular (desktop are not so important for this application).
I've tried with this in the order you see (you can check screen.css sheet on my website):
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) (for smarthpones)
#media only screen and (min-width : 321px) (for smartphone landscape)
#media only screen and (max-width : 320px) (for smartphone portrait)
#media only screen and (min-width: 768px) (for tablet and desktop)
The problem is if I edit the last part (tablet and desktop) also the layout on my smartphone changes. Probably I am not catching how media queries work...
I do not need very complicated functionalities, as you can see the layout is very simple and I need to adjust only some height, width and font-size.
Can you help me?
Thank you in advance for your cooperation.
Please add following meta tag :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For media query details you can more info from http://stephen.io/mediaqueries/ for all iOS devices. If you have any other query let me know. Even you can get better idea from here http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
I have the following media query, to select iPad retina and smaller displays.
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape),
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation : landscape),
only screen and (max-width : 1080px){
}
The problem I have is, on Macbook Pro retina's the styles are also picked up.
I don't have a retina to test on, so I'm having trouble debugging.
Can anyone see the conflicting rule?
You should use simplest media query. Here the link i use for apple's device : http://stephen.io/mediaqueries/
I found the following line of code inside Wordpress' Twenty Eleven theme stylesheet.
What does it mean?
#media only screen and (min-device-width: 320px) and (max-device-width: 480px)
It's called CSS3 Media Queries which is a technique to help your website adapt to various of screen dimensions or basically, it helps to deliver different styles to different devices.
Since you're new, let's break down your media query to two parts:
#media only screen
This means we will apply css styles to a device with a screen. The keyword only used here to hide style sheets from older browsers from seeing phone style sheet.
and (min-device-width: 320px) and (max-device-width: 480px)
This is quite obvious since it means that the specified css only applied when a device has a screen's size with minimum 320px and maximum of 480px in width dimension.
Let's understand the meaning of code step by step:
You code was:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px)
The #media rule is used to define different style rules for different media types/devices.
The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.
To limit the styles to devices with a screen and whose min and max width is known, you can chain the media features to the screen media type:
screen and (min-device-width: 320px) and (max-device-width: 480px)
For further guidance you can check MDN website by clicking here
I do not own any iOS devices, thus all my web coding development is done on Safari. I've been trying this awesome project to do my testing, but I'm finding out that it's possibly limited.
Specifically, I want to use specific media queries within my main CSS so that only the iPad can render the CSS:
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
When I try access it via localhost on OS X Safari using the Responsive Testing project using Safari on OS X, it ignores the code. I even tried more specific code for landscape and portrait with no success:
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
This wasn't successful either.
Since I don't own the iPad/iPhone, I can only see the result at the Apple Store. Is the code I provided literally only accessible on the iPad and I can't use Safari on my computer to do some initial testing?
For those who don't own an iOS device like an iPhone, iPad, or iPod Touch, the cheapest/free way to develop without the hardware is to download XCode and run the iOS Simulator. You can quickly switch between the devices in the simulator and they load as they would on the devices themselves.
Rock on and thank you to #icktoofay!