- Determine what is most important content?
- Design to smaller widths first…The CSS address mobile device first; then have media queries for tablets,desktops.
- Add elements as screen size increases.
You need to add the viewport meta tag to the <head> element, to ensure proper rendering and touch zooming on
mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width property controls the width of the device. Setting it to device-width will make sure that it is rendered across various devices (mobiles, desktops, tablets...) properly.
- initial-scale=1.0 ensures that when loaded, your web page will be rendered at a 1:1 scale, and no zooming will be applied out of the box.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Add user-scalable=no to the content attribute to disable zooming capabilities on mobile devices as shown below.
Normally maximum-scale=1.0 is used along with user-scalable=no. This may give users an experience more like a native app, hence Bootstrap doesn't recommend using this attribute.
No comments:
Post a Comment