Header formatting works for safari but not chrome @media screen size technique on iphone

I was creating a responsive design theme from underscores

I was trying to format the header text .css file to make smaller text when it is opened up on an iphone device.

I used @media screen and (max-width 600px) as the rule set to change the size.

it works perfectly when I view it on safari browser, however when I open it on google chrome app it ignores the rules that I had set.

very frustrating, I tried resetting the cache to see if that would fix but after testing multiple times not sure what is causing it to ignore the rules I have set for the smaller screen.

one more question, is responsive themes still a thing? or is it something I should just abandon.