I was testing a page in ie8 and it occurred to me that no matter what resolution it always uses col-xs-.. classes to size content, therefore always looks like mobile version of the website, but stretched out. Is there a way to force ie8 to respect col-sm-.. col-md.. col-lg-.. classes?
I had the same issue once I was working with my site.
IE8 and below do not support media queries.
Include respond.js in project.
and then all you need to do is to add this meta tag in your page.
<meta http-equiv="X-UA-Compatible" content="IE=edge,IE=10,IE=EmulateIE10,IE=9,IE=EmulateIE9,IE=8,IE=EmulateIE8,IE=7,IE=EmulateIE7" />
hope this would solve your issue
Related
GOAL:
Stylize a chat-interface on mobile devices.
PROBLEM:
I've thrown together a proof-of-concept for a chatbot. Everything is very simple, including the JS & CSS. While I'm also having a separate issue with JS (i think), this here is my CSS problem.
While developing, I tested in FF & Chrome, and scaled down the browsers to emulate the mobile-browser experience.
All the CSS media queries acted as expected.
Yet ...on any mobile device we test, the sizing specified in CSS media queries has no effect and we are left having to zoom in.
EXAMPLE:
temp.mosaranch.com/chatbot-tester
QUESTION:
What could cause mobile browsers to not render specific media-query CSS rules, while the rules are applied when scaling down on a desktop browser?
You need a viewport meta tag in order for media queries to work properly on mobile devices.
Read more at MDN: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
We removed the meta viewport tag <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0" /> from our HTML emails to increase support for legacy Blackberrys. It's documented to potentially cause blank screens at least according to blogs on major email testing services.
The only downside we've seen in testing is it shrinks the results on Windows Phone HTC HD7. (https://litmus.com/pub/71916b3) In Litmus tests including the tag shows the page at 100% zoom. When it's removed it shows the email zoomed out fit to screen. This occurs even when there are no problems with other mobile platforms.
Is there another CSS technique that could replace the tag and get around this?
The tag is included used in one of the more prominent HTML email boilerplate templates. In practice, we've only seen problems with -webkit-text-size-adjust: none; causing blank BB screens.
We've tried targeting the issue media queries and zoom, but there is too much of a risk of them affecting other phones with similar sizes and pixel densities. Probably another tradeoff, typical of email, but wanted to post because I haven't seen much on this.
The W3C is supporting a CSS solution anyway, though it’ll be a while until it’s full supported. Microsoft seems to be on board with it, however, so you can try that.
The prefix-free syntax is #viewport, and Microsoft uses #-ms-viewport.
I may have come across a solution in testing. I'm not positive that this doesn't cause some other tradeoff and would still be happy to select and award the bounty if there's an answer with a better approach.
I'm seeing no issue with Blackberry's and Windows Phone 7.5 renders at 100%
<!--[if IE]>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<![endif]-->
I've put up a test page illustrating my problem : http://www.heliopsis.net/var/fontcustom/
I've created a custom font with help from the awesome http://fontcustom.com/ but I have issues displaying it properly in IE8.
It seems that IE8 can use this font with HTML entities but not with CSS generated content. Even more puzzling, it sometimes manages to show the glyphs but loses them on page reload...
Does anybody know what's going on here ?
Here's a screenshot of what I see on IE8 :
In general, generated content doesn't work quite as well as it should (what does?) in IE8.
I played around a bit with your test page, and you might want to check that you aren't getting dumped off into IE8's compatability mode for IE7 or (even worse) Quirks Mode. Both of those seem to break the custom font, but I see it perfectly fine when IE8 runs as IE8.
To ensure that IE always gives to the most recent cababilities if possible add the
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
meta to your header. Also, use the develper tools for IE8 to make sure that your font is being loaded when you see the issue.
http://www.grossmag.com/2012/september/home.shtml
This link works in both Firefox and Chrome. I am not sure why it won't line up correctly in IE. I am trying to convert from old style tables/td's/tr's and this will be great if I can find out why it isn't lining up in explorer.
Sounds like your site is being viewed in compatibility mode in IE. This can depend on the DOCTYPE of your document.
To cause IE to display using the default mode of the current version, use the following META tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
This will not fix the site for IE7 (for example). If you wish to do that, then you will likely need to create custom CSS rules for older browsers
I'm Making a website for Desktop+iPad. Site look fine in Desktop browsers including Safari.
but in iPad fonts are big and breaking the layout.
This problem can be solved if i use
body {
-webkit-text-size-adjust:none;
}
But according to this info http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/ this code applies to Desktop Safari. user in Desktop safari cannot adjust the size which is not good for site's accessibility
is there any other alternative to solve this big text problem in iPad.
Use this instead:
-webkit-text-size-adjust:100%;
Also, make sure you are setting the initial zoom setting to 1 in your viewport meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />