Change $content_width based on screen size (functions.php)
Question
I've got a WordPress install where I'm trying to change this content_width code:
if( ! isset( $content_width ) ) $content_width = 290;
in my functions.php file based on the users screen size. I've tried using CSS media queries, but for our particular use-case, I need to be able to change this in the functions.php file based on the users screen size.
Something perhaps like this?:
if (isset($_GET['width'])) {
$width = $_GET['width'];
if ($width <= 480) { //mobile devices
if( ! isset( $content_width ) ) $content_width = 290;
} elseif ($width <= 720){ //tablets
if( ! isset( $content_width ) ) $content_width = 720;
} else { //desktops
if( ! isset( $content_width ) ) $content_width = 1080;
}
echo $content_width;
}
Let me know if you have any suggestions. Thanks!
1 answers
solution1
0 2016-02-15 20:50:06
Like this route:
<?php
session_start();
if(isset($_POST['width'])){
$_SESSION['screen_size'] = array();
$_SESSION['screen_size']['width'] = intval($_POST['width']);
$_SESSION['screen_size']['height'] = intval($_POST['height']);
}
if(!isset($_SESSION['screen_size'])){
?>
<html>
<head>
<script>
function getSize(){
document.getElementById('inp_width').value=screen.width;
document.getElementById('inp_height').value=screen.height;
document.getElementById('form_size').submit();
}
</script>
</head>
<body onload='getSize()'>
<form method='post' id='form_size'>
<input type='hidden' name='width' id='inp_width'/>
<input type='hidden' name='height' id='inp_height'/>
</form>
</body>
</html>
<?php
}else{
var_dump($_SESSION['screen_size']);
}
You can't use PHP alone to get the browser width, but I know you know that. This sample code could give you an idea of the right route to take. I got it from this link:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.