Kodiranje HTML/CSS za ipad

[PhobOS]

Pozdrav,
iskodirao sam sajt klasicno desktop verziju u 960gridu. Naravno treba mi da se sajt sto bolje vidi i na ipadu. U landscape modu je sve ok posto je rezolucija 1024 a moja sirina 960 tako da radi bez problema. E sada problem je portrait modu koji je sirok negde valjda oko 708px. Da li moram ceo layout da prekodiram u manju sirinu za ovaj mod i smanjim dimenzije slika. Ili postoji neka skripta ili naredba da se sajt pri ucitavanju u portrait modu odzumira po defaultu i da stane ceo na ekran.

hvala!

[Trunks]

Google: responsive web design, media queries.

[vili]

da se sajt pri ucitavanju u portrait modu odzumira po defaultu i da stane ceo na ekran.

Po defaultu, ukoliko nema meta viewport-a definisanog, sajt se skupi na sirinu ekrana iPad-a i stane ceo na ekran (po sirini). U cemu je problem?

Ukoliko hoces da ti prikaz sajta bude optimizovan specificno za razlicite platforme/rezolucije, onda pogledaj ovo sto je trunks napisao

[PhobOS]

Nema meta za viewport a sajt opet izgleda odseceno i nije fit na ceo ekran

[vili]

Nemoguce!

Any website with a width larger than the iPad screen resolution will be scaled down and zoomable. If your site is narrower than the iPad screen orientations, that could cause unnecessary margins. In this case you’ll need to adjust the viewport settings. Your content should be scaled so that the number of visible pixels matches the screen width. You can also set the width to a specific number to fit content designed for that exact size.
While designing web pages for the iPad, it’s advisable to use the 960 grid system. This most widely used width has become extremely popular due to its ability to fit a large number of modern screen resolutions. If your website is designed to be around 960 pixels wide, it will then show up full scale on the iPad. In general, make your web page work seamlessly in landscape and portrait mode. Note that Safari (the browser that the iPad runs) always calculates device width based on the portrait orientation. If you rotate to landscape mode, the content is not reflowed, but scaled up to fit the wider screen.

[PhobOS]

Kao sto rekoh u 960 je sve Landscape izgleda savrseno naravno. Medjutim u Portraitu kao sto rekoh iskace sve jedino kada ga rucno odzumiram on stane lepo na ekran.

Inace kada se radi ovakav fluid layout kakvo je stanje sa slikama ?? Kako se one skaliraju?

[vili]

Kao sto rekoh u 960 je sve Landscape izgleda savrseno naravno. Medjutim u Portraitu kao sto rekoh iskace sve jedino kada ga rucno odzumiram on stane lepo na ekran.

Kao sto rekoh - nemoguce, ukoliko nije definisan meta "viewport".

Inace kada se radi ovakav fluid layout kakvo je stanje sa slikama ?? Kako se one skaliraju?

http://www.alistapart.com/articles/respons...d-what-we-need/

[PhobOS]

Hvala iscitacu linkove

[vili]

Kad si vec tamo, procitaj prvo ovo: http://www.alistapart.com/articles/responsive-web-design/

[PhobOS]

Hvala jos jednom. Iscitacu pa cemo videti kako cu se snaci.

Problem je sto je ovaj dizajn vec gotov i iskodiran Izgleda da cu morati da preradim layout za ipad

[vili]

Ne znam kako je uradjen lejaut, ali postoji sansa da se samo dodatnim css property-ima moze optimizovati.

CODE

<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

[benny]

koristi bootstrap
http://twitter.github.com/bootstrap/

ili media queries