While using Bootstrap, is there another way to make the mobile-first responsive web page other than using the viewport meta tag?
<meta name=viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Bootstrap is developed to be mobile-first. You don't have to do anything to enable mobile-first design with Bootstrap. But it is recommended by Bootstrap to add the meta-tag as described in the documentation:
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">
The viewport meta-tag is also commented as required meta-tag on the starter template.
Related
I have used twitter bootstrap in my project with DotNetNuke. I did my designing and layout using HTML, CSS, bootstrap. The responsive design was working fine when I tested it on different mobile devices and even if when I resize my browser window.
As it was working well, I converted the design to DotNetNuke Skin. Now, the responsive design works fine only when I resize the browser window and not on mobile devices. I understand the flow in which DNN loads stylesheets and I have followed it. I have made my skin.css as a combination of bootstrap.css and followed by the content of bootstrap-responsive.css
I am not able to find the problem as if I use the same skin.css with my html, it works fine but it doesn't work with DNN (on mobile devices).
You're missing the meta that targets mobile devices for proper scale. Insert the following in the header of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I just notice something interesting and want to share it, maybe it will help someone. In the site header section you should include first the bootstrap.css and only after that the bootstrap-responsive.css because obviously the responsive.css depends on the the bootstrap.css
Of course the meta tag should be also present.
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Make sure responsive CSS(responsive.css) is included after basic not before.
My ASP.NET desktop website works great on a desktop or laptop, the layout however doesn't adjust correctly on a mobile device. I've tried referencing Bootstrap in a link in html but it doesn't change it, I do have bootstrap.css in my Content folder and bootstrap.js in my scripts folder. I used a Blank Template to start my project as well. any advice would be appreciated! Thank you!
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your ASP.NET application</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
Bootstrap CDN
The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links.
Did you use bootstrap 3
Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.
To ensure proper rendering and touch zooming, add the following tag inside the element:
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
I want to know what's the difference between <meta name='viewport'> and Responsive web design using CSS Media Screen?
Because these two things seem alike in functionality.
With or without <meta name='viewport'>, just by setting Media Screen I still can set different layouts for different screen sizes and the layouts automatically detect the screen sizes then set the matching layouts
Viewport meta tag almost uses some other options like this:
<meta name="viewport" content="width=device-width, initial-scale=1, , maximum-scale=1">
Through these options you can define some behaviors for your responsive website. Using <meta name='viewport'> without its options does not have any special affect on your website, although it can still be responsive.
You can check this page to get more information:
https://css-tricks.com/snippets/html/responsive-meta-tag/
<meta name="viewport"> tells browsers with small screens how they should map the CSS pixels onto real pixels. Essentially it is there to say "We've bothered to care about phone sized screens, don't zoom out" to the browser.
It is a prerequisite for (sanely) implementing responsive web design, not an alternative approach to it.
What viewport do I need to add to the viewport meta tag in order view a desktop version of a mobile site while browsing?
This is a very old question but the answer might still come in handy.
To view a desktop version of a website on a mobile, just remove the tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
from the <head> </head> section of your html code.
For a responsive design use:
<meta name="viewport" content="width=device-width, initial-scale=1">
This has been taken from Web Tuts Plus, who have a full round-up of the best practices, when using this meta tag.
Obviously, this will only work if you have a responsive design (i.e. a fluid percentage based grid, and media queries).
I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Microsoft- 640 it's not responsive to the mobile view.[Website working fine in all devices except Windows phone]
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class.
Refer url: http://getbootstrap.com/css/#images
I think that you may be missing in adding the meta viewport tag in the index.html. The meta viewport is defined inside <head> tag like this :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
For more information about meta viewport, you can read this article from w3school. Hope it helps