- Details
- Written by: Stanko Milosev
- Category: Chrome
- Hits: 6386
If you try, in Google Chrome under Windows 8, to execute following statement:
if ("ontouchstart" in document.documentElement) {
console.log("You can touch me")
} else {
console.log("Cant touch this")
}
or as jsLint recommends:
if (document.documentElement.ontouchstart !== undefined) {
console.log("You can touch me")
} else {
console.log("Cant touch this")
}
(document.documentElement.ontouchstart is null if it exists, that is why we have to compare it with undefined, just don't use hasOwnProperty because it seems that it doesn't work on Android devices)
return value will be true, in Windows 7 return value is false
Few more things which you can test:
iOS (iphone/ipad) console:
typeof window.Touch
"object"
Windows 8 VM, Chrome Stable console:
typeof window.Touch
"function"
OSX, Chrome Stable, Safari latest, console:
typeof window.Touch
"undefined"
Taken from here.
In order to disable touch events on google chrome go to:
chrome://flags/
search for:
Enable touch events Mac, Windows, Linux, Chrome OS
Choose disable.
- Details
- Written by: Stanko Milosev
- Category: HTML
- Hits: 2012
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=yourKey&callback=initMap"></script>
<title></title>
</head>
<body>
<div id="map-canvas"></div>
<script>
function initMap() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
zoom: 6,
center: { lat: -34.397, lng: 150.644},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
width: 100%;
height: 100%;
}
</style>
</body>
</html>
- Details
- Written by: Stanko Milosev
- Category: HTML
- Hits: 2342
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta content="text/html; charset=UTF-8" name="Content-Type" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@milosev.com" />
<meta name="twitter:creator" content="@stankomilosev" />
<meta property="og:title" content="Test title" />
<meta property="og:url" content="http://www.milosev.com/gallery/allWithPics/india/www/index.html" />
<meta property="og:image" content="http://www.milosev.com/gallery/allWithPics/india/thumbs/20191111_162437.jpg" />
<meta property="og:description" content="Test description" />
</head>
<body>
test1
</body>
</html>
Here is test link.
Notice line:
<meta content="text/html; charset=UTF-8" name="Content-Type" />Without that line it will not work.
- Details
- Written by: Stanko Milosev
- Category: HTML
- Hits: 2908
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"> <head> <meta property="og:title" content="test" /> <meta property="og:url" content="http://www.milosev.com/gallery/index.html" /> <meta property="og:image" content="http://www.milosev.com/gallery/20180911_202614.jpg" /> <meta property="fb:app_id" content="2128533190490272" /> <meta property="og:description" content="Yo! This is a test!" /> </head> <body> test </body> </html>