Here is a neat little trick you can use to target Safari and make it behave while fixing cross browser layouts. This method will allow you to keep a page valid and it will allow you to only target Safari.
First thing you want to do is use javascript to inject a css file for all browsers that support webkit with this code:
Now, like I stated above this will target all browsers that currently support webkit and add support for it in the future so you cannot rely on only this. So now you need to create the css file and add some code that is Safari specific by using the double # method. Some people will ask, why not just include the double # to begin with? And the simple answer is that it will cause your CSS not to validate.
Here is the example css code that will target only Safari
Enjoy!
Create a file called mobile.js and add the following code to it, be sure to replace shawnhyde.com with your own domain name.
You will need to create a link back to your full version site for people with large display smart phones that do not want to use the mobile site. In order to do this you just need to add the following code somewhere on your mobile site.
You can also add a floating link back to your mobile site in case they have problems by adding the following code to your main site.
You will need to add a file named desktop.css with something like the following code.
You will need to add a file named mobile.css with something like the following code.
Also, be sure you update the code to reflect the correct folders for files. For example, "css" folder, "js" folder.
Edit / Updated the code to support newer mobile clients.
Here is an example of a simple Javascript you can use to add banner ads in Community Server: