Currently, I am in the midst of testing my responsive website and I have encountered an issue with the Chrome emulator. When I select a specific device like "iPhone 6", the responsive views are not displaying correctly. Instead, unsightly scroll bars appear which ruins the overall appearance. Strangely enough, resizing the browser manually showcases that the breakpoints are indeed functioning as intended.
My approach to defining the breakpoints involves using a variable called $screen-md within a SASS variable.
@media screen and (min-width: $screen-md) { }
Attached is a screenshot depicting the problem observed in the Chrome Emulator.