Keskustelu: Nettisivujen teko: Mobiilityylitiedoston "injektointi"

Moikka!

Käytän aika ajoin puhelimellani sivustoa, joka ei ikävä kyllä tarjoa minkäänlaista mobiilitukea, joten ulkoasu on todella epämiellyttävä selattavaksi. Kehittelin huvikseni vaihtoehtoisen tyylitiedoston sivustolle. Se on tarkoitettu pelkästään mobiilialustoille ja selailumukavuuden parantamiseksi. Pöytäkoneen Firefoxilla sivustoa on helppo käyttää vaihtoehtoisen tyylitiedoston kanssa, mutta ikävä kyllä puhelimen selain ei tarjoa samanlaista mahdollisuutta. Miten saisin "injektoitua" tyylitiedostoni sivustoon?

Kirjoitin PHP-skriptin, joka latasi sivuston lähdekoodin file_get_contents-funktiolla ja korvasi <link rel="...">-tyylitiedostomääritteen minun palvelimellani sijaitsevaan urliin. Vaikka sivuston ulkoasu näyttikin siltä kuin piti, ratkaisusta seurasi ongelmia kirjautumisen ja muun toiminnallisuuden kanssa.

Media query?

groovyb: Miten media query ratkaisee injektio-ongelman?

Kirjautuminen ei todennäköisesti toiminut, koska et välittänyt keksejä palvelimen ja selaimen välillä. Vaikka välityspalvelinta ei olekaan vaikea tehdä PHP:lla, ei pyörää kannata keksiä uudelleen. Palvelimessasi saattaa pyöriä valmiiksi esimerkiksi Apache, jossa on mod_proxy. Sivunkaan lähdekoodia ei ole pakko muuttaa, vaan voit ohjata sivun tyylitiedoston osoitteen omaan tiedostoosi.

Google tais tarjota ihan omaa rajapintaa, joka teki selaamisen varsin nautinnolliseksi vuosikymmenen taitteessa. Nykyluureilla en tosin ole kokenut mitään ongelmaa selailla sivustoja, ellei sivut ole tehty pelkästään tekniikalla, jota älyluuri ei tue.

Ja en lyhyehkön googlailun perusteella löytänyt tuota Googlen palvelua, liekö ajettu alas jo nykypäivinä.

media query ratkaisee ongelmasi siten, että voit asettaa css luokkien sisällön vaihtumaan esimerkiksi käytetyn laitteen näyttökoon mukaan. En näe käytännön järkeä erilliselle css filulle, jota switchaillaan php:llä, jos sen voi toteuttaa natiivitavoillakin. (esim: jsfiddle)

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {

.content {
  background-color:chocolate;
  font-size: 1.4em;
}

}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {

.content {
  background-color:indigo;
  font-size:1.1em;
}

}

/* Used if media query doesn't match */
.content {
  background-color:blue;
  font-size:1em;
}

*edit

Kappas vaan. tuohon tosiaan riittää injektio, joka osoittaa julkiseen urliin jossa css filusi sijaitsee. Sivustosta riippuen voidaan toki tehdä tarkistuksia, vastaako renderöity sivusto palvelimen luomaa (esim IIS:n saa valittamaan jos lisäät palvelimen luomaan selectiin optioneja jqueryllä, jos validate checkkiä ei ole iis configin päästä heivattu mäkeen).

Tässähän halutaan injektoida css-tiedosto jonkun toisen ylläpitämään sivustoon, ja ongelmana oli itse injektointi. Ratkaisu on jo lähtökohtaisesti niin purkkaviritys, ettei tyylitiedoston vaihtaminen PHP:llä ole suuri ongelmakohta. Voidaan varmasti myös olettaa, ettei sivustoa käytetä proxyn läpi kuin yhdellä mobiililaitteella, joten yhteensopivuudestakaan ei tarvitse välittää.