css - Can I set @media queries to target just Mac devices (Safari browser, Ipad and Iphone) -


i having issues website rendering on apple devices.

i know -webkit can added css make changes. prefix powerful enough overide layouts , key content?

can set logo display fixed width safari users only, (osx, ipad, iphones)

@media (min-width: 320px) , (max-width: 475px) { .logo { width: 75%; -webkit-width: 200px; } } 

no, media queries target browser's observed media properties, not platform.

you can query navigator object in javascript, , add additional classes dom way, example:

if(navigator.useragent.match(/ip(ad|od|hone)/i))     document.body.classname += ' ios'; 

after can example:

 body.ios header:after {    content:'apple blahblah';  } 

Comments