In many cases you will not be able to show all the information. For me, it was ok to use css media query to have a different css for Android phone. I had to tweak with fonts size and hide some markups.
Inside my html I added the viewport metadata:
<meta name="viewport" content="width=device-width,initial-scale=1"/>
and I entered my two style sheets:
<!-- for all screens --> <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" /> <!-- for Android phone 480px wide or less --> <link rel="stylesheet" href="css/min-styles.css" type="text/css" media="only screen and (max-width: 480px)"/>
All the tweaks were added to min-styles.css file.
Modal Windows are a big pain to use. I had to make them show near the top with fixed position like:
.wicket-modal { position: fixed !important; top:5% !important; }
Without this, on Webkit browser if you scroll down to click some link which opens a modal, you even won't be able to see the modal (depends on how much scrolling you need). A modal cannot be dragged independently on screen. So I guess, if you can avoid modals, then do it. If you cannot avoid them, then keep them as small as possible.
No comments:
Post a Comment