You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 05-06-2013 03:52:10

paulineccl
Contributors
Registered: 25-05-2013
Posts: 37

Auto-fit for the screen width and height

I think it is good to implement the auto-fit for the screen sizes with some client-end javascript and cookies, example:

Added around line 5 of inc/defaults.php:

/* Default settings, not recommend to change this, use the config folder instead! */

if(isset($_COOKIE["my_scr_res"])) {
        $my_scr_res = $_COOKIE["my_scr_res"];
        list($my_res_width, $my_res_height) = explode("x", $my_scr_res);
}

Replaced around line 10 of config/layout.php:

$maxPageWidth = $my_res_width;

Added around line 82 of index.php:

    <title>...</title>

    <script type="text/javascript" language="javascript" src="js/cookie.js"></script>
    <script language="javascript">
    <!--
        if(readCookie('my_scr_res') == null) {
                makeCookie('my_scr_res', screen.width+'x'+screen.height, { expires: 7 });
                location.reload();
        }
    //-->
    </script>

Created new JS file as js/cookie.js:

function reldate(days) {
var d;
d = new Date();

/* We need to add a relative amount of time to
the current date. The basic unit of JavaScript
time is milliseconds, so we need to convert the
days value to ms. Thus we have
ms/day
= 1000 ms/sec *  60 sec/min * 60 min/hr * 24 hrs/day
= 86,400,000. */

d.setTime(d.getTime() + days*86400000);
return d.toGMTString();
}

function readCookie(name) {
var s = document.cookie, i;
if (s)
for (i=0, s=s.split('; '); i<s.length; i++) {
s[i] = s[i].split('=', 2);
if (unescape(s[i][0]) == name)
return unescape(s[i][1]);
}
return null;
}

function makeCookie(name, value, p) {
var s, k;
s = escape(name) + '=' + escape(value);
if (p) for (k in p) {

/* convert a numeric expires value to a relative date */

if (k == 'expires')
p[k] = isNaN(p[k]) ? p[k] : reldate(p[k]);

/* The secure property is the only special case
here, and it causes two problems. Rather than
being '; protocol=secure' like all other
properties, the secure property is set by
appending '; secure', so we have to use a
ternary statement to format the string.

The second problem is that secure doesn't have
any value associated with it, so whatever value
people use doesn't matter. However, we don't
want to surprise people who set { secure: false }.
For this reason, we actually do have to check
the value of the secure property so that someone
won't end up with a secure cookie when
they didn't want one. */

if (p[k])
s += '; ' + (k != 'secure' ? k + '=' + p[k] : k);
}
document.cookie = s;
return readCookie(name) == value;
}

function rmCookie(name) {
return !makeCookie(name, '', { expires: -1 });
}

which is borrowed from here.

The above is the example, which doesn't come to promise yet (not yet test in mobile.php either). Please use them at your own risks.

However, there are still quite some variables i'm not sure where are them, such as the height of the screen, the remaining width variable (plugins as well) which may affected by this action, the design matters for some of the components (such as menu button), so and so... If there is anybody can suggest/discuss further, that will be great!

Updated Info:
I think it is good to set the width and target-densityDpi in mobile.php and index.php as following values:

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, ......

Last edited by paulineccl (17-06-2013 06:18:19)

Offline

Board footer

Powered by FluxBB