Menu
this is the media query:
<link rel="stylesheet" media="screen and (min-device-width: 1024px)" href="desktop.css"/>
<link rel='stylesheet' media='screen and (min-width: 1023px) and (max-width: 1025px)' href='ipad.css' />
so that i get different style in size of 1024px but this worked on all browsers except chrome the new style appears in size of 1041px
is there any way to target chrome only to give it ipa style in different size
454
Media queries are used for the following: To conditionally apply styles with the CSS @media and @import at-rules. To target specific media for the <style> , <link> , <source> , and other HTML elements with the media= attribute.
Using media queries. Media queries are commonly associated with CSS, but they can be used in HTML and JavaScript as well.
Activate Media Query Tool To enable it: go into responsive design mode. click the three dots menu in the top right of the screen. click "show media queries"
When working with HTML and CSS, it is common to face browser-specific issues for the same web application. Therefore, it becomes necessary to develop browser-specific CSS code to assure a seamless user experience, regardless of the browser they use. CSS Grid: CSS Grid is widely used in web design.
The following can be used to target CSS for Chrome (and Safari, as both are WebKit based):
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* CSS rules */
}
See Question on webkit-min-device-pixel-ratio
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
