I'm working on a site that uses media queries. I can see in my desktop browser that they are working correctly, but when I navigate to the site on my WP8 device, no CSS is loaded. I've created a very simple HTML page to replicate the problem and show what solution I tried, but couldn't get to work.
Here is the entire code:
<html>
<head>
<title>WP8 Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
#media screen and (min-width: 1024px) {
body {
background-color: red;
}
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
background-color: blue;
}
}
#media screen and (min-width: 480px) and (max-width: 768px) {
body {
background-color: green;
}
}
#media screen and (max-width: 480px) {
body {
background-color: yellow;
}
}
</style>
<script type="text/javascript">
if (navigator.userAgent.match(/IEMobile\/7\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
</script>
</head>
<body>
text
</body>
</html>
As you can see, it is very simple, there are 4 different "breakpoints" where the body's background color will change for different screen widths. After noticing how it doesn't work in IE on my WP8 device (a Lumia 822), I began googling the issue, and it seems to be a pretty well known issue. So the solution I found, and tried, came from here:
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
It seems pretty straightforward, in that I add the five lines to the top of my CSS:
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
And then add some JS to detect the IE Mobile browser from the UA. I have two issues with that:
First - When I alert my user agent string, I get the following from my WP8 device:
Mozilla/4.0 (compatible; MSIE 7.0;Windows Phone OS 7.0; Trident/3.1;IEMobile/7.0;NOKIA; Lumia 822
According to the article above, and this article, it should be IEMobile/10.0 instead. Any ideas on why mine is different? This appears to be the Windows Phone 7 user agent string. Why would my WP8 device show that?
Because of that difference, I had to change the JS to match 7.0 instead of 10, otherwise the if condition would never be met.
So, even still, with my code above, nothing happens, and my screen loads white on my WP8 device. Can anyone see what I'm doing wrong?
UPDATE:
It appears the JS was throwing an error:
Unexpected call to method or property access
So I found a solution for that, here:
if (navigator.userAgent.match(/IEMobile\/7\.0/)) {
var s = document.createElement("style");
s.setAttribute('type', 'text/css');
var cssText = "#-ms-viewport{width:auto!important}";
if(s.styleSheet) { // IE does it this way
s.styleSheet.cssText = cssText
} else { // everyone else does it this way
s.appendChild(document.createTextNode(cssText));
}
document.getElementsByTagName("head")[0].appendChild(s);
}
But, even now that the code executes successfully, my media queries are still ignored and I still see a white page load. Any ideas?
UPDATE 2:
I found another article, here (scroll to bottom), that says as of the GDR3 update (which I have, through the dev program):
Great news! Microsoft have fixed the viewport issue in WP8 Update 3
(GDR3).
Using device-width in a CSS #-ms-viewport rule now correctly renders
pages at the device-width, instead of the resolution width.
So, again I tried removing the Javascript, and adding only this to the top of my CSS:
#-ms-viewport{
width:device-width
}
But again, no CSS loads.
UPDATE 3:
It appears my User Agent may be correct. When I navigate to whatsmyuseragent.com on my WP8 device, it shows the correct UA. Maybe it has something to do with it being a local IIS 8.0 site when it reports the incorrect one? If that's the case am I not able to test my site locally from my Windows Phone? Has anyone ever done this?
It looks like you've sorted it now with bootstrap, but it's possible the site kicked in to EmulateIE7 (for compatibility) for some reason. It seems Lumia can also pick up on this for example if you have the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> tag and of course media queries are not supported on IE7.
Related
Can someone tell me the "best" way to detect Safari and then its version number?
Look, I don't want to do it but I can't find a way to pin down a WORKING version of speechSynthesis on Safari
See below for an example that works on iOS 7.1.2 IF you don't add the onEnd listener. Apart from that everything is peachy.
In my real world full blown example it talks but still won't deliver the at end event.
On iOS 8 there is no issue.
Please offer a best-of-breed agent/version sniffer or a better working-feature-detector.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fini()
{
alert("end");
}
function talk()
{
if (!('speechSynthesis' in window)) {
alert("Unsupported browser");
return;
}
alert("Getting ready.");
var utterance = "Hello World";
var chat = new SpeechSynthesisUtterance(utterance);
chat.addEventListener('end', fini, false);
speechSynthesis.speak(chat);
}
</script>
</head>
<body>
<p>On Safari this example won't fire any known events<br />
onend, onerror, even onended: -</p>
<input type="button" value="Talk" onclick="talk()" />
<br /><br />
No probs on Chrome or Opera. Spewin!
</body>
</html>
For the record, the addEventListener was throwing an exception on 7.2.1 that could be trapped to signify unsupported speech synthesis.
Opera mobile has laryngitis
Different problem same topic: -
You (and I) may question the correctness of this behaviour in Opera but it appears to be as simple as there are no known/registered/available voices for Opera Mobile on my Android phone :-(
"Sing for me Christine! Sing my angel, SING!" Sorry couldn't help it.
So are there any files I have to download?
FYI on Safari, apparently, the speechSynthesis.getVoices method is synchronous which makes life easy. Elsewhere it is asynchronous and will return an array of length 0 on first call.
We need to register an event such as: -
speechSynthesis.onvoiceschanged = function() {
voices = window.speechSynthesis.getVoices();
alert("Voices " + voices.length);
if (!done) theWork();
};
This never fires on Opera Mobile. Curious!
Why don't I get a error from the synthesis specification like "language-unavailable" or "voice-unavailable"?
Because I didn't explicitly specify a language and a voice?
And why does Chrome deliver onvoiceschanged 3 times?
I'm making a simple website using MVC-4 (my first). I would like to include a picture on the entire background of the home page. How do I do it? Where do I go? What's the code?
By adding following css code within the <head> </head> tag of Views\Shared_Layout.cshtml
<style>
body {
background-image: url('yourimage.gif');
}
</style>
I'm trying to load an epub on my page using epub.js library and its not working on IE 11, it works perfrectly on chrome and Firefox though.
I'm not getting a script error, I don't get a message in the console log, fiddler says all scripts (including zip.js and my epub) are downloaded properly.
It just doesn't load, the iframe embedded has a src="" property and an empty html body. as in the following snapshot.
Here is my html page content:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="content/epubjs/epub.js"></script>
<script src="content/epubjs/libs/zip.min.js"></script>
</head>
<body>
<span onclick="Book.prevPage();">Prev</span>
<span onclick="Book.nextPage();">Next</span>
<div style="height: 700px; border: 5px solid red" id="area"></div>
<script type="text/javascript">
EPUBJS.filePath = "content/epubjs/libs/";
</script>
<script type="text/javascript">
var Book = ePub("content/aliceDynamic.epub", {
version: 4,
restore: false, // Skips parsing epub contents, loading from localstorage instead
storage: false, // true (auto) or false (none) | override: 'ram', 'websqldatabase', 'indexeddb', 'filesystem'
spreads: false, // Displays two columns
fixedLayout: true, //-- Will turn off pagination
styles: {}, // Styles to be applied to epub
width: false,
height: '700px'
});
Book.renderTo("area");
</script>
</body>
</html>
I tried to play around with the options parameter, set things to false and true here and there but it didn't help.
It looks like it is a problem with the current version of epub.js and internet explorer 11. If you try and load the moby dick page you should see the same problem.
Try setting a break on all exceptions (even handled ones) in the javascript engine of IE, and you will see that the javascript throws an exception saying that "'XPathResult' is undefined".
Common recommendations to correct that seem to be installing the wicked-good-xpath library in order to sidestep ie11 lack of XPath support. Install the library and initialize it before trying to load you epub.
If this doesn't correct your problem, you may have to wait until the issues are solved since you don't seem to be the only person who encounters it.
This is my grid setup for media query. But, it shows its in 980px on my mobile.
#import "grid/grid";
$display_320: 'only screen and (max-width: 479px)'; $display_480:
'only screen and (min-width: 480px) and (max-width: 767px)';
$display_768: 'only screen and (min-width: 768px) and (max-width:
985px)'; $display_1024: 'only screen and (min-width: 986px)';
#media #{$display_320} { #import "grid/grid_320"; } #media
#{$display_480} { #import "grid/grid_480"; } #media #{$display_768} { #import "grid/grid_768"; } #media #{$display_1024} { #import
"grid/grid_1024"; }
My mobile phone is suppose to be 320px, but it says 980px. Do I have to do anything in my html?
Here is my code : http://jsfiddle.net/m38Gw/
> <meta content='width=device-width, initial-scale=1.0,
> maximum-scale=1.0, user-scalable=0' name='viewport' />
>
>
> <meta name="viewport" content="width=device-width" />
this solved my problem. Thanks
What's Going On
A lot of mobile browsers will provide fake information about their window width. This started with the iPhone because the pixel density was (is) so high compared to traditional computer monitors.
To give a more current example, the Galaxy S4 has a screen resolution of 1920x1080 pixels. That is the exact same as my 27" monitor. Media Queries, without resolution spoofing by mobile browsers, would be utterly useless here, because there is no difference in terms of real pixels.
To combat this, we have the viewport. This is the "fake" resolution of the mobile device, normally much smaller than the true resolution. Through the viewport we can retain use of media queries.
As tv4free stated, we have a tool to control the viewport, in the form of meta elements. One potential issue with his code though, is the maximum-scale. This will fix the viewport and not allow any scaling. Personally, I don't think that is an a problem is your media queries are properly designed. However, many people consider it to be a bad idea. If you leave out maximum-scale=1.0; user-scalable=0;, you will make the page load correctly each time, but allow the user to zoom in and out.
Code
Set the resolution, allow zoom:
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
Set the resolution, don't allow zoom:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
More information:
http://www.quirksmode.org/mobile/viewports.html
http://www.quirksmode.org/mobile/viewports2.html
I am using Modernizr to detect whether browsers support the CSS3 property background-size for a mobile site I'm building.
I'm testing the site in the Opera Mini 6 Simulator on the official Opera website, and Modernizr detects that the browser supports background-size and adds the class 'backgroundsize' to the <html> element accordingly.
However when I then use the background-size property in my CSS it is not supported.
Here's the head:
<script src="modernizr.js" type="text/javascript"></script>
<style>
body {
background:url('background.gif') no-repeat 0 0 #FFF;
}
.backgroundsize body {
-o-background-size: 100% auto;
background-size: 100% auto;
}
</style>
And the body content
<p>Content</p>
<script>
if (Modernizr.backgroundsize == true) {alert("Background size is supported");}
</script>
I am expecting the single background image to be stretched across the full width of the browser, instead it repeats; the page can be seen here - http://so.ajcw.com/mobile.htm
I guess one of five things has happened - does anyone know the reason and can offer a solution?
Modernizr does not work properly and has given a false positive
Opera Mini 6 incorrectly tells Modernizr it supports background-size when it doen't
The simulator is not an accurate emulation and the real Opera Mini does support background-size
I have written my code incorrectly
Or something else?
background-size is not supported in Opera Mini
I wrote this as a quick work around:
var isOperaMini = (navigator.userAgent.indexOf('Opera Mini') > -1);
if(isOperaMini) {
var root = document.documentElement;
root.className += " opera-mini";
}
It add's a class "opera-mini" to the html element. Therefore you can target Opera Mini. An example below:
.icon {
background-image: url("icon-social.svg");
background-size: 32px;
}
html.opera-mini .icon,
html.no-svg .icon {
background-image: url("icon-social.png");
}
See more at: http://anthonydillon.com/blog/#sthash.VUV1hIy2.dpuf
It seems things have changed. For my Opera Mini 7.5 on Android.
Modernizr.backgroundsize == true;
And it responds correctly to percentage values as well as to cover and contain.
#anthony's answer doesn't work as it's not resetting / removing the background-size property for Opera Mini. The correct way to do this is:
.class {
-o-background-size:cover;
-background-size:cover;
}
x:-o-prefocus, .class {
-o-background-size:;
background-size:;
}
The x:-o-prefocus targets just Opera browsers.