» »

Prikaz spletne strani na mobilnem terminalu

Prikaz spletne strani na mobilnem terminalu

čuhalev ::

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?

aerie ::

čuhalev ::

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 ::

Hja... Potem pa izumljaj toplo vodo.

Netrunner ::

aerie je 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

Zgodovina sprememb…

  • spremenilo: Netrunner ()

čuhalev ::

em enote in slike nekako mi ne gredo skupaj.

Odgovor, kako dobiti ,,pravi podatek vodoravne širine", ki sem ga iskal pravi, da je potrebno dodati width=device-width v meta name="viewport".

Sedaj namesto 960 dobim vrednost 360, kar se sklada z dejstvom, da je slika široka 700 odrezana.

jernejl ::

čuhalev je 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 ::

Probaj dat tist meta tag width=1024

em enote in slike nekako mi ne gredo skupaj


Ker mas napacno predstavo. Ti webdesign prilagajas locljivosti slike kar je napacen pristop.

Zgodovina sprememb…

  • spremenilo: blackbfm ()

čuhalev ::

blackbfm je 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 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.

Zgodovina sprememb…

  • spremenil: čuhalev ()

blackbfm ::

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 ...


Naredis eno sliko najvecje locljivosti kolikr se pac rabi, ostalo je odvisno od css in brskalnika.

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.


A uprabljas kaksen reset css? Daj link da pocekiramo kako izgleda

šajtrga ::

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

čuhalev ::

blackbfm je izjavil:

A uprabljas kaksen reset css? Daj link da pocekiramo kako izgleda

Ne, imam html5, jquery in pogledam, koliko je okno široko, skratka
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("body").html($(window).width());
})();
</script>
<body>
</body>

Tole mi je izpisalo 960, medtem ko je v istem muštru sliko širine 700 odrezalo.

Če bi vse slike bile v svoji izvirni velikosti, potem je 1 MB velika spletna stran (za moje pojme) prevelik zalogaj za telefon.

Looooooka ::

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.

marjan_h ::

Ali kdo ve zakaj ko resizam okno brskalnika določen div izgine?

Poskusil sem s tem: klik

<div class="div1 clearfix">
     <div class="div2">
        Besedilo, ki se prikaze znotraj drugega diva. To besedilo ko resizam okno brskalnika izgine.
     </div>
</div>


Poskusil sem tudi z kodo clear:both, brez uporabe bootstrap. Nikjer v kodi nimam overflow:hidden.
Imam le to:
.div1 {
   width:100%;
   display:block;

}

.div2 {
    bottom: 35px;
    background-color:black;
    color: #FFF;
    margin: 0px;
    padding: 25px 25px 25px 30px;
    position: absolute;
    right: 0px;
    max-width: 295px;
    width:auto;


Hvala za obrazložitev in pomoč.

Netrunner ::

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

Zgodovina sprememb…

  • spremenilo: Netrunner ()

marjan_h ::

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.

4kik4 ::

marjan_h je 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) */
}
}

Zgodovina sprememb…

  • spremenilo: 4kik4 ()

4kik4 ::

ps - ne vem, zakaj ne morem več popraviti, kakorkoli to za responive je za @jaakaa

glede resolucije: nastaviš, kako naj stran izgleda pri različnih širinah (tam, kjer se ti dizajn pač podre).
Sicer pa glede različnih pixlov: moj telefon naj bi imel resolucijo 320px (širina), pa je to bolj realno cca 240px širine, ki je dejansko prikazana, tako da upoštevam min širino 280px ali 240px, in potem dela na vseh resolucijah, in se ti ni treba obremenjevati, kako računa in prikazuje pixle posamezen telefon...


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1298345128 (4265) sunniegoldie
»

HTML in CSS težava pri razporeditvi DIV elementov

Oddelek: Izdelava spletišč
14969 (789) MisterR
»

jquery in div-i (strani: 1 2 )

Oddelek: Izdelava spletišč
8711226 (9964) lisjak
»

CSS - DIV - Brez Tabele

Oddelek: Izdelava spletišč
231585 (1288) jernejp
»

pozicija divov

Oddelek: Izdelava spletišč
71477 (1375) kpkp

Več podobnih tem