Prikaz spletne strani na mobilnem terminalu

Naredil sem spletno stran in ta je lepo pregledna na klasičnem računalniku.

Sedaj pa jo odprem v obeh brskalnikih, ki ju imam naložena na telefonu, in se izkaže, da piksel ni več piksel, skratka na primeru: slika velikosti 700x400 pravokotne oblike ni prikazana v celoti, temveč je desno odrezana, čeprav je vodoravna širina 960 in bi moralo desno ostati še nekaj praznega prostora. Torej, če se 1 piksel slike prikaže na več pikslih zaslona, zakaj ni vodoravna širina potem samo 400 in ne 960, kajti takšno pristransko obnašanje prikazovanja elementov je zelo nezaželjeno.

Kako rešujete takšne težave ozitoma, kako naj dobim pravi podatek vodoravne širine?

Poznam, vendar tega tu ne potrebujem. Hočem da se stran le linearno pomanjša/poveča skladno z zaslonom. Bojazni, da bo kaj neberljivo ni, ker so črke dovolj velike.

Torej, če imam brezhiben prikaz strani na prenosnem računalniku z zaslonom 1024x768, in na mobilnem telefonu zaslon 1280x960, pričakujem, da bo mobilni telefon prikazal točno to, kar vidim na prenosniku, in ne sral po svoje. Pri kakšen telefonu 320x240 se lahko kaj zalomi, vendar me to ne zanima.

aerie je 13. jun 2015 ob 11:20 izjavil:

Responsive web design

točno to potrebuješ.

in ja... px ni vedno enak zato uporabi em enote.

drugače bi mogoče lahko forciral določeno resolucijon z meta tagom .. nevem.. bi se moral poigrat, vendar fluid design je najoptimalnejša rešitev

čuhalev je 13. jun 2015 ob 11:43 izjavil:

Poznam, vendar tega tu ne potrebujem. Hočem da se stran le linearno pomanjša/poveča skladno z zaslonom. Bojazni, da bo kaj neberljivo ni, ker so črke dovolj velike.

Torej, če imam brezhiben prikaz strani na prenosnem računalniku z zaslonom 1024x768, in na mobilnem telefonu zaslon 1280x960, pričakujem, da bo mobilni telefon prikazal točno to, kar vidim na prenosniku, in ne sral po svoje. Pri kakšen telefonu 320x240 se lahko kaj zalomi, vendar me to ne zanima.

PRoblem je v tem, da imajo telefoni precej različne ločljivosti (in posledično PPI). Recimo Galaxy S6 1440 x 2560.
Če bi bil pixel=pixel, bi tvoja spletna stran na nekaterih telefonih izgledala grozovito velika, na drugih pa tako majhna, da se še teksta ne bi dalo prebrati.

blackbfm je 13. jun 2015 ob 12:58 izjavil:

Ti webdesign prilagajas locljivosti slike kar je napacen pristop.

Bitna slika je lepa samo v svoji ločljivosti. Sploh ker je bolj tehnična risba. Lahko še kakšno naredim, ampak da bom naredil pa 10 različnih velikosti ...

jernejl je 13. jun 2015 ob 12:53 izjavil:

Če bi bil pixel=pixel, bi tvoja spletna stran na nekaterih telefonih izgledala grozovito velika, na drugih pa tako majhna, da se še teksta ne bi dalo prebrati.

No, morda na začetku nisem dovolj jasno zapisal. Različni elementi so na telefonu različno veliki. body tag širine 960 spravim na zaslon brez drsanja. img tag širine 700 pa ne oziroma je treba podrsati, da vidim preostanek. Skratka: manjši element iste enote na telefonu postane večji. To je tako kot bankovec z manjšo številko, ki je vreden več.

Sicer uporabljam enote em, kjer je možno, vendar tudi em enota pomeni nekaj px, koliko, verjetno različno od brskalnika.

Alternativna rešitev je nastavitev dpi, Windows ima prevzeto 96, X windows 100. Telefoni pa bogsigavedi.

So bili časi, ko so ljudje imeli od 640x480 do 1600x1200 pa ne pomnim takšnih težav kot jih imam danes.

watch out guys .... we got an expert here

Responsive design al bos moral pa dinamicno spreminjat stran glede na resolucijo.
Tega nihče več ne počne. TO je razlog zakaj se danes uporablja responsive design. Ker ga večina naprav podpira in ker je namenjen točno takim problemom. Vse ostalo je mučenje samega sebe za rezultat, ki ponavadi ni vreden vloženega truda.

Težko rečem ker bootstrapa ne uporabljam, vendar sklepam da tisti clearfix povzroči težavo. Ker je div2 absolutno pozicioniran znotraj div1, ... div1 nima višine oz. je 0 ... če bi imel div 1 overflow hidden bi bilo normalno da div2 ne bi bil viden .. v tem primeru bi pa moral biti, tako da sklepam da oni clearfix povzroči kako težavo ...

clearfix je v tvojem primeru nepotreben saj nimaš float child elementov, tako da ga kar odstrani, pa tudi stili od div1 so nepotrebni saj tisto kar si določil ima div že po defaultu...

Malo inspectaj oba diva z firebugom in poglej kateri stili še vplivajo na njiju ... ponavadi kaki float-i znajo povzročiti podobne težave, vendar v tvojem primeru se jih ne potrebuje

marjan_h je 17. jun 2015 ob 19:29 izjavil:

Ta clearfix bi moral rešiti težavo, tako je rešen problem na stackoveflow.

Saj tudi če ga ne uporabim je stvar enaka.
Ali je možno da je nekje v kodi kakšna javascripta ali pa jQuery, ki ko resizam okno element izgine?

Sam sem dobil template, sedaj ga pa popravljam po svojem okusu. Sam sem spreminjal nastavitve v firebugu on the fly, in še vedno element izgine.

na div1 dodaj min-height:(višina tega div2 + bottom)px; position:relative;
pa clearfix lahko kar zbrišeš....

če imaš statično višino bo delalo

obrazložitev, zakaj: http://www.w3schools.com/css/css_positi...

(...Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.

Absolutely positioned elements can overlap other elements.)


Sicer pa za responsive raje uporabljaj css, kot so že drugi predlagali, kot npr.

@media screen and (max-width : 600px){
.div1{
	width:100%;
	/* (oziroma tiste lastnosti, ki jih hočeš spremeniti/dodati/zamenjati) */
}
}