How to show different number of items in slider based on screen size in PHP?

Question

i am using media queries to adjust website layout.

My question is: How to show different number of items in slider based on screen size?

for small screens i echo this:

<?php if($i == 4) {echo '</li><li>';} ?>

on big screens i need to echo this:

<?php if($i == **3**) {echo '</li><li>';} ?>

how to set this using only php? is there any workaround?

Thanks

You cant do this using only php, php has no way of knowing the users screen size — Patrick Evans, Sep 01 '13 at 11:41
you can use a transit page to get screen size using a javascript function and store that in session. http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa — DevZer0, Sep 01 '13 at 11:42
is there any way to execute php code based on screen size from javascript? if small screen [exec php1] else [exec php2]? — Warrior, Sep 01 '13 at 11:45
why not just use the media queries to also hide the extra elements? — Patrick Evans, Sep 01 '13 at 11:47

score 0 · Answer 1 · answered Sep 01 '13 at 11:48

Short answer: you cannot.

Long answer: since PHP runs on the server, it has absolutely no way of knowing where it will be displayed, or if it actually will be displayed; let alone what is the size of that display. The server has no access to that information. There are some workarounds involving AJAX and sending parameters and reloading the page, and various other hacks; but in the end, you should accept that PHP is an unsuitable tool for the task, and use something like JavaScript to update the styles.

thanks, i think i'll go with something like this: if(width == 1920){ $("#myDiv").load("book1.php"); } else { $("#myDiv").load("book2.php"); } — Warrior, Sep 01 '13 at 11:51

score 0 · Answer 2 · answered Sep 01 '13 at 11:55

You can achieve this by echoing everything twice, with necessary modifications for big screens and mobile screens.

<div class="mobile-only">
  <!-- Echo your stuff for mobiles -->
</div>
<div class="big-screen-only">
  <!-- Echo your stuff for full-sized screens -->
</div>
<!-- Maybe more -- depending on your requirements -->

Then have your media queries hide the .mobile-only on normal screens and vice versa. Although this seems like a bit of an overkill, I guess for most cases this is totally normal.

Update: posting media queries that will do the job (correct them as you see fit)

@media screen and (max-width:480px) {
  .big-screen-only { display: none }
}

@media screen and (min-width:481px) {
  .mobile-only { display: none }
}

How to show different number of items in slider based on screen size in PHP?

2 Answers2