为特定的自助服务终端计算机使用单独的CSS？

Question

I'm trying to help out someone with a problem getting a website to display well on a touchscreen kiosk browser.

They currently have a website running a custom CMS driven site built on the Lithium framework which works well for them and serves their needs. However, what they would like to do is extend this by having a touchscreen kiosk so that the public can view the website whilst visiting them rather than over the internet as normal.

The problem is, the site is fine to use on a desktop and on a mobile device, but trying to use the touchscreen is challenging, as some of the text / links etc are quite small. What I am looking for is a way of getting that one machine to show the website in a much more usable way.

During testing, I've gone down the route of developing a separate CSS sheet, which solves some of these problems by using much more touch-friendly interactions. It seems to work okay.

Where I am struggling is how do I get the style sheet to apply just to that computer rather than everybody who is connecting? At the moment, I have used some php / javascript to check the IP Address of the requesting machine, and if it matches the ip address of the kiosk, then it includes a separate link to the touch friendly CSS file in the section. That works okay - however, i'm not sure this is practical 'in the wild'.

The internet connection it will reside on doesn't have a static IP address, so I cannot guarantee that remaining the same. Is there another trick I could use? I did wonder about matching hostname, but as far as I can tell, there isn't a way of getting the hostname of the requesting computer.

I have full access to both the server and the kiosk. The server is a standard LAMP setup, and the Kiosk is a Windows 8.1 machine with a single touch screen (ELO) running the Metro app Kiosk Browser by riro.

Answer 1

Since you have the ability to use php and have access to the kiosk computer I would use a configuration file just for the kiosk.

1. Create a text file and save it as kiosk.txt for example.

2. Place a line of text in the kiosk.txt to test check if it exists.

example: kiosk

1. Place a check in the index.php file to determine if the kiosk.txt file is present with the proper value on the client machine.

The PHP could look something like this placed in the head section of your index.php file.

Example PHP:

       //get the contents of the kiosk.txt php file
       //you will have to use the path that you saved kiosk.txt to below
       $kiosk = file_get_contents("kiosk.txt");




       //place a check to see if the kiosk.txt file contains the word kiosk
       if(strpos($kiosk,"kiosk") !== false){//begin if then else

       //echo the path to your css file to load it for the kiosk specifically
       //make sure you replace the href value with correct style sheet path below
       echo "<link href='http://pathToYourStyleSheet.css' rel='stylesheet'>"

       }
       else{

            //echo the non kiosk stylesheet

       }//end if then else

Alternatively you could pass a http get variable to the index file which may work better since you are serving the php from another computer and not the kiosk.

make the shortcut or link that loads the index file look something like this:

http://kiosk.com?kiosk=true

Then in your index.php file place a check to see the kiosk get variable is true

   //get the kiosk variable value
   $kiosk = $_GET["kiosk"];


       //check to see if its true       
       if($kiosk === "true"){//begin if then else

       //echo the path to your css file to load it for the kiosk specifically
       //make sure you replace the href value with correct style sheet path below
       echo "<link href='http://pathToYourStyleSheet.css' rel='stylesheet'>"

       }
       else{

            //echo the non kiosk stylesheet

       }//end if then else