Forum » Izdelava spletišč » 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?
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?
č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.
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.
Netrunner ::
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.
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 ::
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
Ker mas napacno predstavo. Ti webdesign prilagajas locljivosti slike kar je napacen pristop.
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 ::
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 ...
Č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
čuhalev ::
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.
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
Poskusil sem tudi z kodo clear:both, brez uporabe bootstrap. Nikjer v kodi nimam overflow:hidden.
Imam le to:
Hvala za obrazložitev in pomoč.
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
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.
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 ::
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...
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 ...
| Tema | Ogledi | Zadnje sporočilo | |
|---|---|---|---|
| Tema | Ogledi | Zadnje sporočilo | |
| ! | Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )Oddelek: Izdelava spletišč | 342177 (1314) | sunniegoldie |
| » | HTML in CSS težava pri razporeditvi DIV elementovOddelek: Izdelava spletišč | 955 (775) | MisterR |
| » | jquery in div-i (strani: 1 2 )Oddelek: Izdelava spletišč | 11104 (9842) | lisjak |
| » | CSS - DIV - Brez TabeleOddelek: Izdelava spletišč | 1573 (1276) | jernejp |
| » | pozicija divovOddelek: Izdelava spletišč | 1462 (1360) | kpkp |