如何基于屏幕分辨率触发html / php文件

Question

i am developing one wordpress responsive website. but now i am facing problem menu issue. please see the bellow image for my navigation. on top black bar "Check our Town" will have drop down menu and on blue bar About Us also have drop down menu

so i want when screen resolution bellow 800 then top menu and logo part will be different. i know one way like i can make separate header part then hide it via css and call it via css media query. for that i need to keep that code always in body. but i don't want it i want it will code will be in body only when it required.

say if make top area separate html/php file if i can call it when screen resolution will 800/480 etc that would be work i guess. i can be possible thru php/js but i have no idea how.

see the image there is two part for navigation one is black area and another is blue area. when i will be bellow 800px it will be all menu in one drop down.

see bellow menu i want this type when screen resolution bellow 800px

Answer 1

I wouldn't recommend the ajax to load the 2 navs. Its adding an extra http request, which is slower than just giving both desktop and mobile the little bit of extra markup required.

I think using media queries is your best approach.

This is what i think you're trying todo: http://jsfiddle.net/krismeister/CNr5y/

The relevevant portion is the @media screen and (min-width:800px){

Answer 2

I think the only way to achieve it is to use ajax. Send an empty page to a client, check window size, and request the content via ajax with a screen width as a param.

Answer 3

i am not so good on jquery and json.. do you bellow way can work ?

$(function() {
    $.post('some_script.php', { width: 800px }, function(json) {
        if(json.outcome == 'success') {
           header-800px.php;
        } else {
            header.php;
        }
    },'json');
});

ref : Getting the screen resolution using PHP