I don't know why my responsive design isn't working for a size with max-width of 320px. I'm trying different sizes for iPad in Chrome and works properly but for iPhone goes wrong. My code is the following:
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/iPhonePortrait.css" media="only screen and (max-width : 320px) and (orientation : portrait)" />
<link rel="stylesheet" type="text/css" href="css/iPadLandscape.css" media="only screen and (max-width : 1024px) and (orientation : landscape)" />
<link rel="stylesheet" type="text/css" href="css/iPadPortrait.css" media="only screen and (max-width : 768px) and (orientation : portrait)" />
The browser is updated, any idea?
You need this as your meta tag<meta name="viewport" content="width=device-width,initial-scale=1.0">.
Related
I have been using the chalkboard plugin for a reveal presentation. As it is written on the github page (https://github.com/rajgoel/reveal.js-plugins/tree/master/chalkboard), I saved the drawings in a json file by pressing d (as far as I can tell, the data was correctly stored in the json file) and then I added the line src: "prova/cb.json", to the initialization for chalkboard and loaded the presentation with ?print-pdf.
However, when I open the presentation, there is no trace of the drawings that should be loaded.
This is the html of a minimal (non) working example...
Does anyone know what's going on?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Prova</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/night.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section >
<h4>Prova</h4>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/math/math.js"></script>
<script src="plugin/chalkboard/plugin.js"></script>
<script>
Reveal.initialize({
hash: true,
controls: false,
transition: 'convex',
math: {
mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS-MML_HTMLorMML'
},
chalkboard: {
src: "prova/cb.json",
toggleChalkboardButton: { left: "80px" },
toggleNotesButton: { left: "130px" },
},
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom, RevealMath, RevealChalkboard ],
});
</script>
</body>
</html>
I was looking at my Facebook message/call log and there's number I don't know, so I was copy and pasting them to look them up, and got the pop up verify it s me question and after I did this code just took over screen.
I also want to add I unlocked my developer option, and I also think my FB, google, accounts my phone. This is the second time it has happened not sure if same code, I still have the first on.
I have been googling and asking other people, I have learned lots, but darn I still can't figure it all at, just bits and pieces and been working on this for 3 months. I need help and I m loosen my mind..can anyone help?
Here is some of the code
<!DOCTYPE html><html><head><title>Uploading and Managing Your Call Logs</title><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" /><link href="https://static.xx.fbcdn.net/rsrc.php/v3/ya/r/O2aKM2iSbOw.png" rel="shortcut icon" sizes="196x196" /><meta name="referrer" content="origin-when-crossorigin" id="meta_referrer" /><meta name="theme-color" content="#3b5998" /><link rel="stylesheet" type="text/css" crossorigin="anonymous" data-bootloader-hash="OEPze" href="https://static.xx.fbcdn.net/rsrc.php/v3/yY/l/0,cross/-RGU43oKxbV.css" /><link rel="stylesheet" type="text/css" crossorigin="anonymous" data-bootloader-hash="xILv8" href="https://static.xx.fbcdn.net/rsrc.php/v3/yH/l/0,cross/MLFY5VudT49.css" /><link rel="stylesheet" type="text/css" crossorigin="anonymous" data-bootloader-hash="cFdJm" href="https://static.xx.fbcdn.net/rsrc.php/v3/y_/l/0,cross/1FUAQskYbo2.css" /><link rel="stylesheet" type="text/css" crossorigin="anonymous" data-bootloader-hash="RoiDK" href="https://static.xx.fbcdn.net/rsrc.php/v3/y1/l/0,cross/hDC0vMrvPIV.css" /><script id="u_0_q">function envFlush(a){function b(b){for(var c in a)b[c]=a[c]}window.requireLazy?window.requireLazy(["Env"],b):(window.Env=window.Env||{},b(window.Env))}envFlush({"stratcom_event_profiler_hook":"1","timeslice_heartbeat_config":{"pollIntervalMs":33,"idleGapThresholdMs":60,"ignoredTimesliceNames":{"requestAnimationFrame":true,"Event listenHandler mousemove":true,"Event listenHandler mouseover":true,"Event listenHandler mouseout":true,"Event listenHandler scroll":true},"isHeartbeatEnabled":true,"isArtilleryOn":false},"shouldLogCounters":true,"timeslice_categories":{"react_render":true,"reflow":true},"sample_continuation_stacktraces":true,"dom_mutation_flag":true});</script><script>document.domain
= 'facebook.com';/^#~?!(?:\/?[\w\.-])+\/?(?:\?|$)/.test(location.hash)&&location.replace(location.hash.substr(location.hash.indexOf("!")+1));</script><script>__DEV__=0;</script><script id="u_0_r" crossorigin="anonymous" src="https://static.xx.fbcdn.net/rsrc.php/v3iczx4/yq/l/en_US/IvlINgvLNJi.js" data-bootloader-hash="Yth2c"></script><script id="u_0_o">CavalryLogger=window.CavalryLogger||function(a){this.lid=a,this.transition=!1,this.metric_collected=!1,this.is_detailed_profiler=!1,this.instrumentation_started=!1,this.pagelet_metrics={},this.events={},this.ongoing_watch={},this.values={t_cstart:window._cstart},this.piggy_values={},this.bootloader_metrics={},this.resource_to_pagelet_mapping={},this.initializeInstrumentation&&this.initializeInstrumentation()},CavalryLogger.prototype.setIsDetailedProfiler=function(a){this.is_detailed_profiler=a;return this},CavalryLogger.prototype.setTTIEvent=function(a){this.tti_event=a;return this},CavalryLogger.prototype.setValue=function(a,b,c,d){d=d?this.piggy_values:this.values;(typeof d[a]==="undefined"||c)&&(d[a]=b);return this},CavalryLogger.prototype.getLastTtiValue=function(){return this.lastTtiValue},CavalryLogger.prototype.setTimeStamp=CavalryLogger.prototype.setTimeStamp||function(a,b,c,d){this.mark(a);var e=this.values.t_cstart||this.values.t_start;e=d?e+d:CavalryLogger.now();this.setValue(a,e,b,c);this.tti_event&&a==this.tti_event&&(this.lastTtiValue=e,this.setTimeStamp("t_tti",b));return this},CavalryLogger.prototype.mark=typeof console==="object"&&console.timeStamp?function(a){console.timeStamp(a)}:function(){},CavalryLogger.prototype.addPiggyback=function(a,b){this.piggy_values[a]=b;return this},CavalryLogger.instances={},CavalryLogger.id=0,CavalryLogger.disableArtilleryOnUntilOffLogging=!1,CavalryLogger.getInstance=function(a){typeof a==="undefined"&&(a=CavalryLogger.id);CavalryLogger.instances[a]||(CavalryLogger.instances[a]=new CavalryLogger(a));return CavalryLogger.instances[a]},CavalryLogger.setPageID=function(a){if(CavalryLogger.id===0){var b=CavalryLogger.getInstance();CavalryLogger.instances[a]=b;CavalryLogger.instances[a].lid=a;delete CavalryLogger.instances[0]}CavalryLogger.id=a},CavalryLogger.now=function(){return window.performance&&performance.timing&&performance.timing.navigationStart&&performance.now?performance.now()+performance.timing.navigationStart:new Date().getTime()},CavalryLogger.prototype.measureResources=function(){},CavalryLogger.prototype.profileEarlyResources=function(){},CavalryLogger.getBootloaderMetricsFromAllLoggers=function(){},CavalryLogger.start_js=function(){},CavalryLogger.done_js=function(){};CavalryLogger.getInstance().setTTIEvent("t_domcontent");CavalryLogger.prototype.measureResources=function(a,b){if(!this.log_resources)return;var c="bootload/"+a.name;if(this.bootloader_metrics[c]!==undefined||this.ongoing_watch[c]!==undefined)return;var d=CavalryLogger.now();this.ongoing_watch[c]=d;"start_"+c in this.bootloader_metrics||(this.bootloader_metrics["start_"+c]=d);b&&!("tag_"+c in this.bootloader_metrics)&&(this.bootloader_metrics["tag_"+c]=b);if(a.type==="js"){c="js_exec/"+a.name;this.ongoing_watch[c]=d}},CavalryLogger.prototype.stopWatch=function(a){if(this.ongoing_watch[a]){var b=CavalryLogger.now(),c=b-this.ongoing_watch[a];this.bootloader_metrics[a]=c;var d=this.piggy_values;a.indexOf("bootload")===0&&(d.t_resource_download||(d.t_resource_download=0),d.resources_downloaded||(d.resources_downloaded=0),d.t_resource_download+=c,d.resources_downloaded+=1,d["tag_"+a]=="_EF_"&&(d.t_pagelet_cssload_early_resources=b));delete this.ongoing_watch[a]}return this},CavalryLogger.getBootloaderMetricsFromAllLoggers=function(){var a={};Object.values(window.CavalryLogger.instances).forEach(function(b){b.bootloader_metrics&&Object.assign(a,b.bootloader_metrics)});return a},CavalryLogger.start_js=function(a){for(var b=0;b<a.length;++b)CavalryLogger.getInstance().stopWatch("js_exec/"+a[b])},CavalryLogger.done_js=function(a){for(var b=0;b<a.length;++b)CavalryLogger.getInstance().stopWatch("bootload/"+a[b])},CavalryLogger.prototype.profileEarlyResources=function(a){for(var b=0;b<a.length;b++)this.measureResources({name:a[b][0],type:a[b][1]?"js":""},"_EF_")};CavalryLogger.getInstance().log_resources=true;CavalryLogger.getInstance().setIsDetailedProfiler(true);window.CavalryLogger&&CavalryLogger.getInstance().setTimeStamp("t_start");</script><script id="u_0_p">(function _(a,b,c,d){function e(a){document.cookie=a+"=;expires=Thu, 01-Jan-1970 00:00:01 GMT;path=/;domain=.facebook.com"}function f(a,b){document.cookie=a+"="+b+";path=/;domain=.facebook.com;secure"}if(!a){e(b);e(c);return}a=null;(navigator.userAgent.indexOf("Firefox")!==-1||!window.devicePixelRatio&&navigator.userAgent.indexOf("Windows Phone")!==-1)&&(document.documentElement!=null&&(a=screen.width/document.documentElement.offsetWidth,a=Math.max(1,Math.floor(a*2)/2)));(!a||a===1)&&navigator.userAgent.indexOf("IEMobile")!==-1&&(a=Math.sqrt(screen.deviceXDPI*screen.deviceYDPI)/96,a=Math.max(1,Math.round(a*2)/2));f(b,(a||window.devicePixelRatio||1).toString());e=window.screen?screen.width:0;b=window.screen?screen.height:0;f(c,e+"x"+b);d&&document.cookie&&window.devicePixelRatio>1&&document.location.reload()})(true, "m_pixel_ratio", "wd", false);</script><meta http-equiv="origin-trial" data-feature="getInstalledRelatedApps" data-expires="2017-12-04" content="AvpndGzuAwLY463N1HvHrsK3WE5yU5g6Fehz7Vl7bomqhPI/nYGOjVg3TI0jq5tQ5dP3kDSd1HXVtKMQyZPRxAAAAABleyJvcmlnaW4iOiJodHRwczovL2ZhY2Vib29rLmNvbTo0NDMiLCJmZWF0dXJlIjoiSW5zdGFsbGVkQXBwIiwiZXhwaXJ5IjoxNTEyNDI3NDA0LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=" /><link rel="manifest" href="/data/manifest/" crossorigin="use-credentials" /></head><body tabindex="0" class="touch x2 android _fzu _50-3 iframe _2v9s"><script id="u_0_n">(function(a){a.__updateOrientation=function(){var b=!!a.orientation&&a.orientation!==180,c=document.body;c&&(c.className=c.className.replace(/(^|\s)(landscape|portrait)(\s|$)/g," ")+" "+(b?"landscape":"portrait"));return b}})(window);</script><div id="viewport" data-kaios-focus-transparent="1"><h1 style="display:block;height:0;overflow:hidden;position:absolute;width:0;padding:0">Facebook</h1><div id="page" class=""><div class="_129_" id="header-notices"></div><div class="_129- _6dr5"><div class="_52z5 _451a _3qet _17gp" id="header" data-sigil="MTopBlueBarHeader"><div class="_4g33 _52we" id="mJewelNav"><div class="_4g34"><div class="_59te jewel _hzb noCount" data-store="{"tab":"feed","tabID":4748854339}" id="feed_jewel" data-sigil="nav-popover feed"><a name="News Feed" accesskey="1" href="/home.php" class="_19no touchable" id="u_0_7" data-sigil="icon"><span style="display:block;height:0;overflow:hidden;position:absolute;width:0;padding:0">News Feed</span><div class="_2ftp _62ta"><div class="_59tf _2ftq"><span class="_59tg" data-sigil="count">0</span></div></div></a></div></div><div class="_4g34"><div class="_59te jewel _hzb noCount" data-store="{"tab":"requests","tabID":122818001061574}" id="requests_jewel" data-sigil="nav-popover requests"><span style="display:block;height:0;overflow:hidden;position:absolute;width:0;padding:0">FRIEND REQUESTS</span><div class="_2ftp _62ta"><div class="_59tf _2ftq"><span class="_59tg" data-sigil="count">0</span></div></div><div class="flyout popover_hidden" role="complementary" id="reqs_flyout" data-sigil="flyout flyout"><div data-sigil="flyout-content context-layer-root"><div id="MFriendRequestsFlyoutContent"><ol class="_7k7 inner" data-sigil="contents requests-flyout-pagelet-placeholder"><li class="acw apl" data-sigil="marea"><div style="text-align:center;"><div class="_2so
_2sq _2ss img _50cg" data-animtype="1" id="u_0_4" data-sigil="m-loading-indicator-animate m-loading-indicator-root"></div></div></li></ol></div></div><div class="_imu"></div></div></div></div><div class="_4g34"><div class="_59te jewel _hzb noCount" data-store="{"tab":"messages"
I use leaflet to display my geolocated picture on my website (you can see my test site here: http://test.vincentbourganel.fr/pages/map-osm/)
everthing goes fine exept one thing:
when I browse my website from an ios mobile device (ios 11.3.1), no markers are displayed.
I can't figure where is the matter.
I try to have a reduce test case (only html, outside zenphoto, used for my gallery) with only 2 markers but the issue remains the same.
You can see it here:
http://test.vincentbourganel.fr/test_osm_map.html
can you point me to the right direction to solve this issue?
thanks for your help!!
vincent
edit after comment:
there is the code of my page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<script type="text/javascript" src="/zp-core/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
<title>[VB] Photo US | Map OSM</title>
</head>
<body>
<h3>Map OSM</h3>
<div id="osm_map" style="width:100%; height:600px;"></div>
<script>
var map = L.map('osm_map', {
zoom: 4,
zoomControl: false,
minZoom: 2,
maxZoom: 18
});
L.tileLayer.provider('OpenTopoMap').addTo(map);
L.control.zoom({position: 'topleft'}).addTo(map);
L.marker([57.150,-6.100]).addTo(map);
L.marker([57.500,-6.450]).addTo(map);
map.fitBounds([
[57.150,-6.100], [57.500,-6.450]
]);
</script>
</body>
</html>
there is the code of my test case taht you can see here: http://test.vincentbourganel.fr/test_osm_map.html
I am unable to see the 2 markers on my ios mobile device.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<script type="text/javascript" src="/zp-core/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
<title>[VB] Photo US | Map OSM</title>
</head>
<body>
<h3>Map OSM</h3>
<div id="osm_map" style="width:100%; height:600px;"></div>
<script>
var map = L.map('osm_map', {
zoom: 4,
zoomControl: false,
minZoom: 2,
maxZoom: 18
});
L.tileLayer.provider('OpenTopoMap').addTo(map);
L.control.zoom({position: 'topleft'}).addTo(map);
L.marker([57.150,-6.100]).addTo(map);
L.marker([57.500,-6.450]).addTo(map);
map.fitBounds([
[57.150,-6.100], [57.500,-6.450]
]);
</script>
</body>
</html>
I have a Rails app which is using a responsive Boostrap layout to scale down for mobile.
I want to get a splash screen and hide the task bar on iphones
I have the following code:
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "KegTracker" %></title>
<%= csrf_meta_tags %>
<!-- iPhone -->
<link href="/assets/apple-touch-startup-image-320x460.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="/assets/apple-touch-startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="/assets/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
<![endif]-->
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144' %>
<%= favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114' %>
<%= favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72' %>
<%= favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png' %>
<%= favicon_link_tag 'favicon.ico', :rel => 'shortcut icon' %>
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDh4VYHZ56mUlwkE6gE16cDRxCaCLjJQE&sensor=false">
</script>
<script type="text/javascript"
src="http://jawj.github.com/OverlappingMarkerSpiderfier/bin/oms.min.js">
</script>
</head>
All the images are linked correctly. The touch icons work fine, but the touch-startup-image and apple-mobile-web-app-capable tags don't seem to work at all on either Safari or Chrome on my iPhone 4S running 6.1
Has anyone got any ideas? Is Bootstrap overriding the tags?
As Justinavery said, you have to add to the homescreen for this to work and then click on the icon.
Also, to make all links work inside the 'headless view' that this generates you need to add this piece of JS to your code.
<!-- to stop the links loading in another window -->
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
Taken from here
How do you set as inline if it's not one of the words listed on the single word media types? (http://www.w3.org/TR/CSS2/media.html#media-types)
<link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" rel="stylesheet" />
The handheld media type is ignored by the iPhone, but I'd imagine the external call above would be in a format somewhat like this:
#media handheld
{
body {margin:0; padding:0;}
}
See example V at http://www.w3.org/TR/css3-mediaqueries/
#media screen and (color), projection
and (color) { ... }