Responsive design is crucial for modern websites, ensuring they are viewable on a variety of devices and screen sizes. However, there are some factors to consider with the recent releases of Safari.
In windowed view, Safari behaves as expected, with media queries responding appropriately when the browser window is resized.
However, in full split-screen mode, Safari behaves slightly differently. Sometimes, the media queries work as expected, but other times, Safari ignores them and zooms out the content of the viewed page regardless of the initial-scale=1 parameter and media queries. It is uncertain whether this inconsistency is related to the shrink-to-fit meta attribute introduced in Safari 9.
The Safari engineers might have made this design decision to ensure that the content does not shift or disappear as the user moves the split-screen division bar. This could be important in complex pages with many layers, form fields, and other critical elements. However, it can also result in text and UI elements becoming very small, sacrificing legibility.
If you open the same page in a narrow space (in split-screen mode), Safari will always honour the initial-scale=1 parameter and display the appropriate media query for the page, and the website will look as the designer intended.
It’s fascinating to see the amount of attention to detail the Safari engineers put into their split-screen mode’s behaviour to ensure the user always has the best experience. Balancing these design decisions is essential as it can often annoy or even enrage certain groups of users. Responsive design is still crucial, and with the right techniques and attention to detail, you can ensure your website looks great on any screen size and any browser.
Therefore, it’s important for web designers and developers to be aware of Safari’s slight differences in behaviour when designing and testing responsive websites. By embracing responsive design and paying attention to detail, you can ensure your website is ready for the modern web.
Leave a Reply