screen resolution in opencart

Question

I am curious to set my styles as per screen resolution in opencart. I am using a simple script which is working on all other php files but it gives a very strange response in open cart, here is the solution which I am using

<script type="text/javascript">
<!--
var ScreenWidth=screen.width;
var ScreenHeight=screen.height;
var ScreenResolution="<?php $res ?>"=ScreenWidth+"x"+ScreenHeight;
--></script>

But when I use res variable for comparing or even in echo, it gives

Notice: Undefined variable: res

I am stuck with it, any suggestions on it? or any other same solution?

Answer 1

Um... Are you trying to define a PHP variable from JavaScript?

It seems you may need to relearn the difference between server-side and client-side code.

However that is a moot point, since you can use CSS3 media queries to make resolution-dependent styles:

@media all and (max-width: 1024px) {
    div {background-color: red;}
}

That kind of thing. Leave default styles outside of any query, so that browsers that don't support media queries can be styled in the default manner.