Having issue with media query for iPhone Plus

I'm pulling my hair with this issue. I have set the following for my iPhone 6+ media query.

iPhone 6+

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3)

For Samsung Galaxy S4

@media only screen and (min-device-width: 320px) and (max-device-width: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3)

The issue I'm having now is that the browser is not recognizing the iPhone 6+ media query but choose to use the Samsung Galaxy S4 media query when I test them with Chrome device emulator.

I'm not having problem with the rest except for the iPhone 6+. Anyone has any idea what I'm missing here?

If I add !important to my css only than the iPhone 6+ media query will be recognized and used. But it is kind of crazy to have !important for every classes in iPhone 6+ media query.