While trying to optimize site for mobile devices you have to add viewport meta tag:
You can add additional CSS file that will be used on mobile device only. To achieve this just add CSS media type. In Android developer’s guide at http://developer.android.com/guide/webapps/targeting.html it suggests to target device DPI value like:
It works fine, but Google Chrome on desktop PC also loads this CSS file.
There is another solution to target mobile devices (both Android, iPhone, Blackberry): to specify maximal width of the screen like:
The problem is that Android (at least 2.3 I’ve tested) recognizes this media type only after page reloading (refreshing) in browser. Googling the web I found the open issue.
1 2 3 4 5 6 7