I've read the following from the bootstrap doc:
You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.
Is there a way around this? More specifically, is there a way to have a website using bootstrap 3 display like it should on IE8 and mobile devices?
The quote you included is actually from the section describing how to purposefully turn off the responsiveness of the site (turn off mobile support).
Respond.js actually makes your site responsive on IE8, and will have no effect on other browser.
Use a conditional statement, and respond.js will only load for IE8.
<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->
Related
I've created a small email signature with Bootstrap 4 which displays correctly in Firefox (v 69.0.1):
It doesn't display responsively in Chrome, in Safari on a mobile, or in the Gmail app.
Am I missing something completely obvious?
Any help would be greatly appreciated!!
Bob
HTML5 introduced a method to let web designers take control over the viewport, through the tag... You need to add the tag below in the <head>... for more information here
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
Update: you URL working as expected after adding the link above (screenshot below)
I'm developing a MEAN application that needs to look good on mobile browsers. At first I was trying and failing to use Bootstrap to make this responsive, as I didn't realize Angular was clashing on the Bootstrap and JQuery JS libraries that Bootstrap depended on.
So I found Angular-UI project on GitHub...sorry for no link but I don't have enough reputation.
I'm trying to get the Collapse Navbar to be responsive on a mobile device. (responsive meaning it adjusts to the "hamburger menu" and the names of the links no longer appear in the menu)
I'm failing to get this to work within the bounds of my Node application.
To isolate the issue, I took the HTML and JS from the plunker referenced by the Angular-UI Bootstrap example (which, by the way also appears responsive to small displays when viewed from a iPhone or Samsung Edge) and made a stripped down Node app, which basically returns what is in the Plnkr example, but that still doesn't appear responsive when viewed from a mobile phone browser (I tested mobile Chrome, Safari, and Firefox)
See screenshot of sample app on OpenShift cloud:
http://angbootstrapnotresponsive-215api.rhcloud.com/assets/
This sample is not responsive
Note: If I view my sample in "responsive" mode in the dev tools, or simply resize my desktop browser window, the menu links fold up into that hamburger menu as desired. Only when I try to use the mobile browser from either iPhone 6 or Samsung Edge this responsive Navbar isn't responsive.
thanks in advance for any ideas!
why angular material layout not support in windows safari and IE9 and it support IE10 partially. the general buttons and animations will support, but not the layouts in angular material.
the angular material website itself is not working in IE9, the layout will be not aligned properly as other browsers. is there any way to fix it.
I am working on some Animations in HTML5 Canvas that are loaded in a Web Browser Control in WPF Application. Ideally Web Browser control should be using same IE 10 engine but my animation loads slowly in an embedded WPF Web Browser Control as compared to IE 10.
Is there some hack around or a solution to this.
WPF Browser runs in a compatible mode.
Try adding this tag in the section:
<meta http-equiv="X-UA-Compatible" content="IE=10">
I'm trying to get Foundation to be responsive on my iPhone's browsers. I've tried Safari and Chrome on my phone and both of them show the desktop layout.
On the desktop however, if I shrink the browser window I see the layout respond.
I even tried adding one of Zurb's sample templates and that still didn't work.
See here:
http://jsbin.com/okayop/3
Any help would be appreciated.
Add the following within the head element of your document:
<meta name="viewport" content="width=device-width" />