Media queries not working inside an iframe

Include the meta bellow into the HTML which loads your iframe and it should work, at least on android devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

I ended up having to target the iframes width. (May not work in all situations)
But what i did was make the iframe 100% width and then it would resize with the window, so all i did was target the px of the iframe instead of the window

Try it this way, instead of device just target the width

Change

@media only screen and (max-device-width : 640px) {

to

@media only screen and (max-width : 640px) {

Also, it is more advised to target both min and max view-port width if you want to avoid considering order of media query declarations in your style-sheet

@media screen and (min-width: 320px) and (max-width: 640px) {
    .header-text {
       background-color: blue;
    }
}