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

65
index.php
View File

@@ -14,23 +14,54 @@ $details = isset($_GET['details']) ? $_GET['details'] : "";
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.80, maximum-scale=3, minimum-scale=0.80">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Barlow' rel='stylesheet'>
<script type="text/javascript" src="updatethumbnail.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){
update();
});
function update() {
$.get('page.php?rootpage=<?php echo $rootpage ?>&orderby=<?php echo $orderby ?>&details=<?php echo $details ?>', function(data) {
$("#page").html(data);
window.setTimeout(update, 10000); // 10 secondes
});
}
</script>
<meta id="viewport" name="viewport">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Barlow' rel='stylesheet'>
<script type="text/javascript" src="updatethumbnail.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){
update();
});
function update() {
$.get('page.php?rootpage=<?php echo $rootpage ?>&orderby=<?php echo $orderby ?>&details=<?php echo $details ?>', function(data) {
$("#page").html(data);
window.setTimeout(update, 10000); // 10 secondes
});
}
</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>
<body>