nka/ps4-gametime
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

viewport should ajust perfectly on mobile.

Browse Source
This commit is contained in:
Sebastien Plante
2018-12-05 09:52:13 -05:00
parent de18ae4535
commit c886e3668f
2 changed files with 49 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
index.php
View File

@@ -14,7 +14,7 @@ $details = isset($_GET['details']) ? $_GET['details'] : "";
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=0.80, maximum-scale=3, minimum-scale=0.80"> <meta id="viewport" name="viewport">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Barlow' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Barlow' rel='stylesheet'>
@@ -31,6 +31,37 @@ $details = isset($_GET['details']) ? $_GET['details'] : "";
}); });
} }
</script> </script>
<script type="text/javascript">
//mobile viewport hack
(function(){
function apply_viewport(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
var ww = window.screen.width;
var mw = 520; // min width of site
var ratio = ww / mw; //calculate ratio
var viewport_meta_tag = document.getElementById('viewport');
if( ww < mw){ //smaller than minimum size
viewport_meta_tag.setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + mw);
}
else { //regular size
viewport_meta_tag.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + ww);
}
}
}
//ok, i need to update viewport scale if screen dimentions changed
window.addEventListener('resize', function(){
apply_viewport();
});
apply_viewport();
}());
</script>
</head> </head>
<body> <body>

2
style.css
View File

@@ -43,7 +43,7 @@ body{
margin-top: 10px; margin-top: 10px;
display: block; display: block;
overflow: auto; overflow: auto;
opacity: 0.9; opacity: 0.95;
} }
#message { #message {