8/17/2019 Using Php as a Cascading Style Sheet to Adjust Screen Width for Mobile Devices

1/5

Using PHP As A Cascading Style Sheet To Adjust Screen Width For MobileDevices.

y! Douglas Miller 

"#T$%DUCT"%#

Designing &eb 'ages to acco((odate varying screen &idths has al&ays been a'roble( &ith develo'ing &ebsites. Site visitors on des)to' and la'to' co('utersare using screen resolutions that can range *ro( as little as +,, to -,, 'iels toas (uch as /0,,, 'iels. 1ven so0 a &ebsite builder can still standardi2e thedesign to s'eci*ic screen &idths as long as the dis'lays are conventionalco('uter (onitors.

With (obile devices0 this is not the case. This is because screen &idths *ordi**erent (anu*acturer3s s(art 'hones and tablets are all over the (a'. They

can3t be (ade to con*or( to s'eci*ic dis'lay &idths *or this reason and alsobecause the (obile device screens can be (ade to 2oo( in and out. So &hatdoes one do to overco(e this 'roble( so (obile device users &ho visit your&ebsite don3t have to deal &ith screen &idths that &on3t auto(atically *or(atcorrectly4

The internet is *illed &ith (any ans&ers to that 5uestion. Here0 " &ill tal) about asolution " use to address this 'roble(. "t has &or)ed &ell &ith A''le iPods0 A''leiPhones0 A''le iPads and Android s(art 'hones.

TH1 C%D1 THAT MA61S "T HAPP1#

Here is the 7avascri't code " currently use to lin) to cascading style sheets basedon &hatever bro&ser or device is detected &ith 7avascri't. The *irst threesections o* the code belo& lin) to their a''ro'riate cascading style sheets *ordes)to' and la'to' co('uters based on bro&ser ty'e. A*ter these have beentested *or &ith no success0 the code that co(es net &ill lin) to a 'h' *ile used asa cascading style sheet i* the navigator object detects an A''le iPod0 A''leiPhone0 A''le iPad0 Android or any other (obile device. 

8scri't ty'e9:tet;javascri't:<8=>>

;; retrieve the bro&ser ty'e.bro&ser?ty'e 9 navigator.a''#a(e@

;; set the gotcss3 variable to ,.var gotcss 9 ,@

;; lin) to these css sheets *or "130 #etsca'e3 and %'era3 bro&ser ty'es. #ote that the;; #etsca'e ty'e enco('asses Mo2illa Fire*o30 Boogle Chro(e3 and A''le Sa*ari3.;; set the gotcss3 variable to .

1

8/17/2019 Using Php as a Cascading Style Sheet to Adjust Screen Width for Mobile Devices

2/5

i* bro&ser?ty'e 99 :Microso*t "nternet 1'lorer:E docu(ent.&rite:8lin) $1G9stylesheet H$1F9style>ie?(e.css TIP19tet;cssns?(e.css TIP19tet;csso'?(e.css TIP19tet;css

8/17/2019 Using Php as a Cascading Style Sheet to Adjust Screen Width for Mobile Devices

3/5

bac)ground! RFFFFFF@J

ht(l (argin! ,@'adding!,@height! ,,Q@

;; here assign the 'assed screen &idth value in the 'h' session variable;; to the (ai(u( &idth 'ara(eter in the Lht(l section.(a>&idth! 84'h' ?S1SS"%#NinthereO@ 4<J

;; the re(aining stu** is 'ure css declarations and assign(ents.

'(argin>le*t! /Q@ (argin>right! Q@ *ont>si2e! ,'t@ *ont>*a(ily! arial@J

H(argin>le*t! /Q@ *ont>si2e! ,'t@ *ont>*a(ily! arial@J

H/*ont>si2e! 't@ *ont>*a(ily! arial@ *ont>style! italic@ color! R,,,,,,@J

H(argin>le*t! /Q@ *ont>si2e! 't@ *ont>*a(ily! arial@ *ont>style! italic@ tet>align! le*t@J

H*ont>si2e! 't@ *ont>*a(ily! arial@ *ont>style! italic@ tet>align! center@J

H*ont>si2e! /,'t@ *ont>*a(ily! arial@ *ont>style! italic@ color! red@ tet>align! le*t@J

table(argin>le*t! Q@ *ont>si2e! V't@ *ont>*a(ily! arial@ color! R,,,,,,@ tet>align! le*t@J

e(color! R,,,,,,@J

ol(argin>le*t! /Q@ *ont>si2e! ,'t@ tet>align! le*t@J

.class A!lin) tet>decoration! underline@ color! &hite@J

.class A!visited tet>decoration! underline@ color! &hite@J

.class A!active tet>decoration! underline@ color! &hite@J

.class A!hover tet>decoration! underline@ color! yello&@J

.class/ A!lin) tet>decoration! underline@ color! blue@J

.class/ A!visited tet>decoration! underline@ color! blue@J

.class/ A!active tet>decoration! underline@ color! blue@J

.class/ A!hover tet>decoration! underline@ color! red@J

.class A!lin) tet>decoration! underline@ color! red@J

.class A!visited tet>decoration! underline@ color! red@J

.class A!active tet>decoration! underline@ color! red@J

.class A!hover tet>decoration! underline@ color! bro&n@J

.bullet (argin>le*t! /Q@ list>style>ty'e! disc@ *ont>si2e! ,'t@ tet>align! le*t@J

.narrtv (argin>le*t! /Q@ (argin>right! -Q@ list>style>ty'e! none@ *ont>si2e! ,'t@ tet>align! le*t@J

Rto'section bac)ground! RFFFFFF@J

R*ooter

3

8/17/2019 Using Php as a Cascading Style Sheet to Adjust Screen Width for Mobile Devices

4/5

'osition! absolute@'adding>to'! +'@'adding>botto(! +'@'adding>le*t! /.Q@&idth! V-.Q@botto(! ,@height! /,'@bac)ground! RFFFFFF@tet>align! le*t@*ont>si2e! V't@*ont>*a(ily! arial@J

Rcontentcolu(n (argin>botto(! >/,'@'osition! absolute@bac)ground>i(age! urlth?color?beige?,.j'gE@*ont>*a(ily! arial@height! auto@(in>height! ,,Q@

&idth! ,,Q@J

Rle*tcolu(n bac)ground! R,,,,,,@tet>align! le*t@'osition! absolute@height! ,,Q@&idth! /,Q@ ;Width o* le*t colu(n;J

.le*tborder(argin! ,'@ ;Margins *or inner D"X inside each colu(n to 'rovide 'addingE;

*ont>*a(ily! arial@J

.bo  *ont>si2e! ,'t@

*ont>*a(ily! arial@&idth! ,Q@

  'adding! ,' ,' ,' '@(argin>botto(! -'@(argin>le*t! /Q@*ont>&eight! bold@tet>align! center@

  color! $ed@J

.red  bac)ground>color!RFDCCA@

border! solid /' R1-A@J

.testibo

4

8/17/2019 Using Php as a Cascading Style Sheet to Adjust Screen Width for Mobile Devices

5/5

  *ont>si2e! ,'t@

*ont>*a(ily! arial@&idth! V,Q@

  'adding! ,' ,' ,' ,'@(argin>to'! /Q@(argin>botto(! /Q@(argin>le*t! /Q@(argin>right! /Q@*ont>&eight! bold@tet>align! le*t@

  color! R,,,,,,@  bac)ground>color!RFFFFFF@

border! solid /' R,,,,,,@J

The above code in the 'h' *ile readout gets the job done *or auto(atically*or(atting the dis'lay &idth on A''le and Android devices and 'robably other

(obile devices as &ell. The )ey is to assign the screen &idth that has beendetected &ith 7avascri't so it sea(lessly *lo&s *ro( the 7avascri't enca'sulatedht(l Llin) tag as a 'assed ht(l variable to the lin)ed cascading style sheet'ara(eters that re5uire it inside the 'h' *ile used as a css. The 'h' server sidescri'ting language does a *ine job o* *acilitating this i('ortant *unction.

C%#CGUS"%#

This coding techni5ue to auto(atically *or(at screen &idths *or (obile devices is*airly si('le to i('le(ent and it see(s to &or) consistently. "n a &orld *illed &ithall sorts o* (obile devices used at ho(e and &or)0 this 'rogra((ing code can

be a valued asset *or (a)ing your screen &idths *or(at correctly. To learn (oreabout (y a''lication develo'(ent services0 'lease visit (y so*t&are develo'er  &ebsite.

5

http://www.analyzohiosoftware.com/application-development-cleveland-ohio.htmlhttp://analyzohiosoftware.com/http://www.analyzohiosoftware.com/application-development-cleveland-ohio.htmlhttp://analyzohiosoftware.com/