I'm on the latest version of Firefox on OSX (v46.0.1) and have implemented a tablet specific design using the following media query:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){}
Firefox ignores it completely. It also render the bootstrap xs size media query completely wrong but I don't expect anyone to ever see it (Firefox mobile works fine). I've turned off all the extensions in Firefox just in case but it didn't help.
Has anyone else experienced this?
Change min/max-device
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
To min/max-width
@media only screen and (min-width: 768px) and (max-width: 1024px)
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).
Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.