Initial-scale=1.0 fits the viewport to the dimensions of the device (device-width and device-height values), which is a good idea because the size of the viewport fits the dimensions of the device regardless of its orientation. Raphael Goetter for example wrote in his blog post: However there are also people saying only to use initial-scale and not width=device-width. If it does not there is a script which disables the user’s ability to scale the page allowing the orientation change to occur properly. Removing the property initial-scale might sometimes fix that bug. As a result users have to manually zoom the page back out. In some cases a zoom bug occurs when rotating the device from portrait to landscape. Some people say not to use initial-scale at all as it might lead to incorrect behavior in iOS. Note that there are multiple different opinions about using initial-scale and width=device-width. That way the page content will be displayed 1:1, an image with a size of 350px on a screen with 350px width would fill out the whole screen width. What this does is set the width of the viewport to the width of the device and set the initial zoom level to 1.0. We set the width to device-width and the initial scale to 1.0. In our head section let´s set the charset to UTF-8 which is also easier now in HTML5.Īs we would like to create a responsive design which should work on all kind of devices and screen resolutions we need to add the viewport meta tag which defines how the website should be displayed on a device. The doctype declaration in HTML5 is fairly easy to remember compared to previous HTML/XHTML versions. Let´s begin by defining the HTML5 doctype and creating our head section with the required scripts and CSS files. Creating the head – Doctype and Meta Tags Having this overview of our structure will make it a lot easier to create the page. I recommend to always draw a layout before starting to build a website. Click on the image on the right side to see how our website will be arranged. If you have any questions you can always use the comment section and I will try to help you.įirst of all let´s have a look at the basic structure of our website.
#Responsive design tutorial how to#
Some parts of the tutorial will not be described in detail as it is assumed that you know how to e.g. Please note that this tutorial is made for people who already have an intermediate knowledge level. The second part will then show you how to style it using CSS3 features to create this stunning HTML5 cross-browser responsive website. This part of the tutorial will show you the HTML structure and the required scripts in a step by step tutorial. I tried to include as many different features as possible, so we will be dealing with a jQuery slider, CSS3 transitions and animations, CSS Media Queries and so on. In this responsive web design tutorial we will create an awesome responsive HTML5 website starting from scratch.
0 kommentar(er)
