Current configuration of hardware: iPhone 6s, iOS 10.0.1 (I have a software update pending for iOS 10.0.2)
I have the following html test code (p.s. I've also tested with iPhone 6s specific queries like specified in this answer)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#media (max-width: 600px) { h1.query1 { color: red !important; } }
#media (max-width: 700px) { h1.query2 { color: purple !important; } }
#media (min-width: 300px) { h1.query3 { color: blue !important; } }
#media (min-width: 320px) { h1.query4 { color: white !important; } }
#media (max-device-width: 1125px) { h1.query5 { color: yellow !important; } }
#media (max-device-width: 1242px) { h1.query6 { color: violet !important; } }
</style>
</head>
<body style="margin: 0 0 0 0; padding:0; min-width: 100%; width: 100%; offset: 0; clear: both;">
<div style=" margin: 0; min-width: 100%; padding: 0; width: 100%;">
<h1 class="query1" style="color: green;">MEDIA TEST</h1>
<h1 class="query2" style="color: green;">MEDIA TEST</h1>
<h1 class="query3" style="color: green;">MEDIA TEST</h1>
<h1 class="query4" style="color: green;">MEDIA TEST</h1>
<h1 class="query5" style="color: green;">MEDIA TEST</h1>
<h1 class="query6" style="color: green;">MEDIA TEST</h1>
</div>
</body>
</html>
Live version is here: http://codepen.io/anon/pen/gwkbEK
When I send it to my account in Gmaill app on Android phone I get the following result (all lines are colored):
But when I open same mail in native iOS 10 mail application in iPhone 6, I get this result (all labels are green):
Am I doing something wrong, or iOS 10 mail client stopped supporting media queries?
Important to note: these screenshots are of Gmail app on iOS, not iOS Mail app. Until a few weeks ago, no mobile Gmail client anywhere supported media queries. Gmail recently started rolling out media query support based on platform, geo-location, and product. Results will vary across Google Mail products until the rollout is complete.
As of October 2016, U.S.-based Gmail accounts are starting to see media query support whereas U.K.-based accounts are not. Litmus Previews use UK Gmail accounts, so we won't see the update appear in Litmus regardless of where we're testing from.
Gmail is also rolling out based on Gmail product, so depending on what TYPE of Gmail product you're checking and the platform, results could vary. Here is a quick breakdown of where the rollout stands now:
More info and updated charts on Litmus
Related
I have created an azure function and its timeout is set to 10mins in hosts.json but when I am triggering it through ADF V2 azure function activity then activity is getting terminated after 4mins 7sec, Can any one guide me what is happening at the backend and why I am getting this behavior? Thanks.
Update: If i run my azure function through ADF or from postman it gives me this error after 4min 7sec:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>502 - Web server received an invalid response while acting as a gateway or proxy server.</title>
<style type="text/css">
< !-- body {
margin: 0;
font-size: .7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #EEEEEE;
}
fieldset {
padding: 0 15px 10px 15px;
}
h1 {
font-size: 2.4em;
margin: 0;
color: #FFF;
}
h2 {
font-size: 1.7em;
margin: 0;
color: #CC0000;
}
h3 {
font-size: 1.2em;
margin: 10px 0 0 0;
color: #000000;
}
#header {
width: 96%;
margin: 0 0 0 0;
padding: 6px 2% 6px 2%;
font-family: "trebuchet MS", Verdana, sans-serif;
color: #FFF;
background-color: #555555;
}
#content {
margin: 0 0 0 2%;
position: relative;
}
.content-container {
background: #FFF;
width: 96%;
margin-top: 8px;
padding: 10px;
position: relative;
}
-->
</style>
</head>
<body>
<div id="header">
<h1>Server Error</h1>
</div>
<div id="content">
<div class="content-container">
<fieldset>
<h2>502 - Web server received an invalid response while acting as a gateway or proxy server.</h2>
<h3>There is a problem with the page you are looking for, and it cannot be displayed. When the Web
server (while acting as a gateway or proxy) contacted the upstream content server, it received an
invalid response from the content server.</h3>
</fieldset>
</div>
</div>
</body>
</html>
And if I go to App insights of function App it shows me timeout of 10mins which I think is correct because I am using consumption plan so I know that. But at 4min and 7sec the 502 response which is sent to the client i am not familier with issue. Please guide.
As your function can continue to run as expected even though the 502 error shows, so I think it has nothing to do with your azure function.
As far as I know, azure function activity just allows 230 seconds for the request in data factory. You can refer to this document.
If you want to request it by postman, you can set the "request time out" in the "settings" of your postman. Please refer to this document.
Hope it helps~
Maybe just me, but if true that you are limited to 230 seconds then this is CRAZY. I can definitely run functions for longer than that. In consumption plan up to 10 minutes, in premium plan you can have 60 minutes run time. See here.
If the answer is to use Durable function, then you might as well just implement your workflow in there and forget about ADF completely.
Azure Function ADF Activity tool-tip states that default timeout is 12 hours.
Something doesn't smell right.
I'm doing a bit of a POC for the WP8.1 application written in HTML5/JS that includes the maps in the webviews.
Scenario: I have 2 webviews with exactly the same HTML structure I'm referring the webviews to. In one webview I'm loading the bing.html that loads the bing maps. In other webview I'm loading the google maps map via the google.html.
bing.html and google.html have the same HTML structure and that is:
Bing.html
<!DOCTYPE html>
<html style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript" src="/pages/map/bing.js"></script>
</head>
<body onload="webContext.onLoad();" style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<div id="mapDiv" style="position: relative; width: 100%; height: 100%"></div>
</body>
</html>
google.html
<!DOCTYPE html>
<html style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Google Maps API reference -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="/pages/map/map.js"></script>
</head>
<body onload="initialize()" style="width:100%; height:100%; overflow:hidden; margin: 0 auto;">
<div id="mapdisplay" style="width:100%;height:100%; margin: 0 auto;"></div>
</body>
</html>
And the result is, that the Bing Map tiles appear to be blurred, not as sharp as on bing maps page itself. Google Maps look top notch.
However, when I open the bing.html itself from local file system, the map tiles are sharp.
Possibly this is a scaling issue. Whereas the Google code recognizes the display scaling to be greater than 100%, it loads so called retina or high-dpi or high-ppi images. The Bing map code has the option enableHighDpi to enable it manually:
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{
credentials: "YourBingMapsKey",
center: new Microsoft.Maps.Location(37.769831,-122.447004),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 12,
enableHighDpi: true,
});
source
It loads high dpi images then, which should be less blurry.
I don't know how good the Bing Maps code then detects high dpi devices (non-high-dpi devices shouldn't get high-dpi images to save data.). So feel free to also use the following code to detect the device pixel ratio using a CSS media query and only load high dpi images if necessary:
var isHighDpiDisplay = false;
if (window.matchMedia) {
var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
if (mq && mq.matches || (window.devicePixelRatio > 1)) {
isHighDpiDisplay = true;
}
}
<!DOCTYPE html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Test title</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
}
</style>
</head>
<body>
<p>Example 1<br>
<a href="http://dummyimage.com/600x400/000/fff.png" download>Download this image</a></p>
</body>
</html>
The above, is a button (kind of) that downloads an image. It works fine on my laptop, but when I navigate to the url on my iPhone it doesn't download. Just takes me to the actual image.
Anyone know why? Or how I can fix this?
Thanks!
iPhone doesn't have a download functionality. You will need to tap-and-hold, and select "Save".
I've seen similar questions, but not this exactly.
Do CSS media queries have to be in an external CSS file to work properly?
I've got a client who I’ve only got access to an inline css block within WordPress. Their IT department has the CMS really locked down, and the only thing I have access to change is the CSS via a plugin called Improved Simpler CSS that puts an inline block of <style type="text/css"></style> before the <head> closes.
In doing the site, the browser seems to pick up the "inline" media queries OK, responding to changing the browser's width, but utilizing an iPhone or iOS simulator, I only get the desktop view, and I'm thinking iOS doesn't like the CSS not being externalized.
<style type="text/css">
/* Mobile-specific media query */
#media only screen and (min-width: 320px) and (max-width:767px) {
#wrapper,
.home #content,
.page #container,
.page .page,
#footer,
.page #content {
width: 100%;
}
#header {
margin-top: 50px;
margin-left: 20px;
width: 95%;
width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
height: 151px;
}
}
</style>
No, they don't have to be external...
MDN's docs on Media Queries demonstrates the two main ways of setting media queries:
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a stylesheet -->
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
Media queries are perfectly valid within <style>, they don't have to be within an external stylesheet.
Make sure you include the viewport meta tag in your head (if you haven't already):
<meta name="viewport" content="width=device-width, initial-scale=1">
It would also help if you include the CSS you currently have.
I am applying draggable event of jQuery UI library to a popup window. Dragging works well,but the problem is, if the window has scroll and if I click on the scroll drag event is triggered and popup is being moved and drag event is not released even the scroll event is released... Can you please tel me how to overcome it...
Here is my code snippet.....Please check and let me know what's the error
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script>
<style>
#Outer{
width:400px;
height:100px;
border:1px solid blue;
position:absolute;
overflow:auto;
}
#Hdr{
background:#ffcc99;
border-bottom:1px solid blue;
}
</style>
</head>
<body>
<div id="Outer">
<div id="Hdr">About India</div>
<div>
The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP).
Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a
newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare.
</div>
</div>
</body>
<script>
$(document).ready(function(){
$('#Outer').draggable();
});
</script>
</html>
You may want to use a handler to bypass that problem: Like here fiddle
HTML :
<div id="Outer">
<div id="Hdr">About India</div>
<div id="Inner">
The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP).
Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a
newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare.
</div>
</div>
CSS:
#Outer{
width:400px;
border:1px solid blue;
position:absolute;
}
#Inner {
width:400px;
height:80px;
position:absolute;
border:1px solid blue;
overflow:auto;
}
#Hdr{
background:#ffcc99;
border-bottom:1px solid blue;
}
JS :
$(document).ready(function(){
$('#Outer').draggable({handle: "#Hdr"});
});