Starting a new website might be challenging. Different CMSes. Different Browsers and different user devices. In this regard, Web Designers have to test their websites from different angles in the first step and find workarounds and solutions for some rendering differences between all the user agent types. The clou is to find a specific routing for, for example, all users that visit your site via the Safari Browser or via an Apple device. But foremost, let’s take a look at the rendering from these devices.
Therefore, you can use for example the Chrome Developer Tools within the Chrome Stable Browser. After pressing F12 on your keyboard, please select the Toogle device toolbar button. In the following, you can select the device you want to test your website’s performance with. Another tool I can recommend is BrowserStack. This comes with some free requests and some paid plans for seamless testing. A Chrome Extension is also available.
After testing your performance, there might be some issues in the rendering process. In my projects, the most came from the Safari Rendering side. But changing the CSS or otherwise changing the rendering processing of your project could potentially break afterward your website in other browsers or might disrupt your layout in a way you don’t want it to be displayed. To solve this you can decide to switch to a more straightforward layout or CMS or you can decide to try some server side rendering. Server side rendering might be an obvious solution, but in some cases this comes with similar problems.
If you don’t want to change your entire layout, I can recommend using the user agent Property to serve a different layout, especially to the user agents where the rendering difficulty occurs. Therefore, you can implement a JS Script in the <head> section of your web project and set a different route for these users. I implemented this in 3close.de for the homepage route, which normally displays an image cube, but which was not rendered properly on Safari.
By implementing this code snippet:
<script language=javascript>
var browser = navigator.userAgent.toLowerCase();
if (((browser.indexOf('safari') > -1)
||
(browser.indexOf('ucbrowser') > -1))
&& (
browser.indexOf('chrome') < 1))
{
location.replace
("https://www.newurl.html");
}
</script>and setting the newurl to the designated redirect page, you will redirect all Safari users.
If there are similar issues within your web project, don’t hesitate to contact me.
You can find additional information here.
This is a solution with:
Leave a Reply