I'm sure you all are using viewport meta tag for responsive design, but did you know that the viewport tag can also be very useful for non-responsive design? If you haven't got the time to convert your design to responsive yet, you should read this article on how to use viewport tag to improve the appearance of your design on mobile devices.
General Use of Viewport Tag
Viewport meta tag is generally used for responsive design to set the viewport width and initial-scale on mobile devices. Below is a sample viewport tag.
As you may know, the default viewport width on iPhone is 980px. But your design might not fit in that range. It could be wider or narrower. Below are two examples where you can utilize the viewport tag to improve the rendering of non-responsive design on mobile devices.
The screenshot on the left shows how the site would render without the viewport tag. As you can see, the page is touching on both sides. I added viewport tag to specify the viewport width to 1024px so it leaves some margin space on the left and right sides.
<meta name="viewport" content="width=1024">
Another Example
If your design is too narrow, it might also cause an issue. Lets say the container width of your design is 700px and it is not responsive, it would look like the screenshot on the left where there is a big empty space on the right.
You can simply fix this by setting the viewport width to 720px. The width of your design doesn't change, but iPhone will scale it to fit in 720px.
<meta name="viewport" content="width=720">
Common Mistake
A common mistake is that people often apply initial-scale=1 on non-responsive design. This will make the page render at 100% without scaling. If your design is not responsive, users would have to pan around or zoom out to see the full page. The worst case is combining user-scalable=no or maximum-scale=1 with initial-scale=1. This will disable the scaling and zooming capability of your site. With scaling disabled, users have no way to zoom out to see the complete page. Remember: if your design is not responsive, do not reset the initial-scale or disable scaling!
Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). Enjoy!
CSS3 Clock With jQuery
Analogue Clock
3D Cube That Rotates Using Arrow Keys
Multiple 3D Cubes (Slide In/Out)
CSS3 Accordion
Auto-Scrolling Parallax
Isocube
Image Gallery
Matrix
7 Javascript-effect Alternatives Using CSS3
Image Hover Effects
Turning Coke Can (Control With Scrollbar)
3D Meninas
Polaroid Gallery
Space
Note: this one is graphic intense and takes a while to load, but the result is crazy!
This is the simple way to handle your html page. like html tags body, list, table, etc. Just copy below
code into your new sheet. And save it as "reset.css". After saving file just LINK this CSS file into your Index page.
Due to its relatively poor level of standards support, Internet Explorer tends to be the subject of most CSS hacks.
Internet Explorer was not designed to allow multiple versions to be installed at once, and Microsoft doesn't officially support any such configurations. If you use one of the hacked third party packages that attempts to do this, you will experience problems with version-specific conditional comments, among other things. This is because the different stand-alone copies still rely on a common centralized registry for certain data, including version information.
Although there is no simple way to cut through all of the issues with stand-alone versions of Internet Explorer, it is possible to force them to look elsewhere for their version information, thus fixing this issue with conditional comments.
CSS hacks are usually bad. You should probably do this instead.
<!--[if lt IE 7]><html class="ie6"> <![endif]--> <!--[if IE 7]><html class="ie7"> <![endif]--> <!--[if IE 8]><html class="ie8"> <![endif]--> <!--[if gt IE 8]><!--> <html><!--<![endif]--> This uses conditional comments to target certain versions of Internet Explorer, and the element receives a custom class name for different versions of IE, and no class name when the browser is not IE.
Then in your CSS, you would target IE7 or IE8 like this: .element { margin-bottom: 20px; }
