The object is first to create an html or, preferably, PHP page that will detect the ever-changing width of the viewport as the viewer crunches it up or extends it, and change the content of the page at two breakpoints; thus, there will be three php pages with content. I am not sure if the landing page should be .php or .html; in any case, the landing page will ultimately be the index page, and its sole function is to call or extinguish one of the three PHP includes, each of which will itself have includes and calls for the css. Both the content and the css of these includes may differ, operating on the principle of VARY HEADER in order to keep the integrity of the SEO.
In Pseudocode,the foregoing requirements become the following.
- I cannot find any coherent reference to conditional statements in AJAX, and I had rather avoid JQuery, but the idea is:-
if viewport < 700 px, serve x.php;
if viewport > 700 px and < 900 px, serve y.php;
if viewport > 900 px, serve z.php;
- Since this must happen live on demand, it seems that the cache for the AJAX and the PHP pages must never be made.
- Whenever the viewer changes the viewport according to the above breakpoints, the PHP include will change, no matter how rapidly the viewer may do so. Practically, however, this means simply that telephones, tablets, and larger devices will each have a page tailored, both in style and in content, for that kind of device.
The above having been accomplished, the next considerations are:-
Is it possible to have the landing page written in php, which I doubt, because the detection ought to precede the PHP; hence, the probability arises that the landing page ought to be written in HTML.
Shall the html of the landing page be replaced by a completely fresh page, header and all, in one of the three called pages called by AJAX, such new page to be the usual PHP page in all of its glory? It seems doubtful, because the viewport must be constantly detected, which is the reason for the landing page in the first place. Therefore, each of the three called PHP pages must probably simply be includes that flesh out the original html page. If so, what is the best way in which to structure the code? Please see below for a statement of difficulties.
The first trial ought to be of simple content which, on each include, simply says something nice and gives the dimensions of the viewport live. If that works, then the frindly message and statement of width will be eradicated by replacement with the real content, a copy being kept as a souvenir for future reference.
I have cobbled together AJAX code that will serve up the pages required, but I have not been able to destroy the caching.
Although this question has been asked before in various ways, there is no one comprehensive answer to the question to be found.
Many thanks to any such of good will who may be kind enough to address this question with the comprehensiveness which it deserves.