html css trikovi smartfoni testiranje rezolucije


Besplatni online kurs web dizajna

Nastavna jedinica: Trick 16 - Smartfoni (testiranje rezolucije)


Nazad


Smartfoni - testiranje rezolucije


U IFRAME čiji je način funkcinisanja i stilizovanja opisan u času 55.1. uneti web adresu (domen) U nastavku se daje render web strane u nekim standarnim rezolucijama (smartfone). Svaki IFRAME ima svoju klasu kod stilova koja ima neka svoja svojstva. U ovom slučaju jedina razlika izmedju klasa su dimenzije IFRAME-a po pitanju širine i visine što u renderu daje prikaze ekrana u različitim rezolucijama za neke standarne smartfone. NAPOMENA: Ovu vežbu pregledati preko DESKTOP računara (ne preko mobil uredjaja) jer IFRAME ima fiksne dimenzije pa kod nekih mnjaih ekrana ti Div Tag-ovi mogu da "izadju" iz ekrana mobil uredjaja. Ovu vežbu pregledati samo preko DESKTOP računara kada se želi testirani pregled web sajta ili aplikacije (raspored formi) preko standarnih dimenzija ekrana.

Head


<style type="text/css">
.smart1 {                         
 width: 280px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 340px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart2 {                         
 width: 280px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 393px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart3 {                         
 width: 280px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 428px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart4 {                         
 width: 280px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 500px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart5 {                         
 width: 320px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 500px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart6 {                         
 width: 335px;                 /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 527px;                /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
.smart7 {                           
 width: 374px;                   /* DA BI SE DOBILA REALNA ŠIRINA EKRANA 533 PX UNOSI SE WIDTH KOJA JE 40 PX MANJE */
 height: 596px;                  /* DA BI SE DOBILA REALNA VISINA EKRANA 853 PX UNOSI SE HEIGHT KOJI JE 140 PX MANJE */    
 border: solid 20px #000;        
 box-shadow: 0 0 0 3pt #999;     
 border-radius: 40px;               
 -webkit-border-radius: 40px;    
 -moz-border-radius: 40px;       
 -o-border-radius: 40px;          
 -ms-border-radius: 40px;        
 border-bottom: solid 80px #000; 
 border-top: solid 60px #000;     
 margin-right: 15px;               
}
</style>

Body


<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Apple Iphone 3/4 i LG Optimus S - 320 x 480</h3>  
<iframe class="smart1" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Samsung Galaxy S2 i ASUS Galaxy 7 - 320 x 533 </h3>  
<iframe class="smart2" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Apple iPhone 6 - 320 x 568 </h3>  
<iframe class="smart3" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Samsung Galaxy S3/4 - 320 x 640</h3>  
<iframe class="smart4" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Samsung Galaxy S5 - 360 x 640</h3>  
<iframe class="smart5" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Apple iPhone 6 - 375 x 667</h3>  
<iframe class="smart6" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

<h3 style="background-color:#0066FF; color:#FFFFFF; padding:7px;"> Apple iPhone 6 plus - 414 x 736</h3>  
<iframe class="smart7" src="http://www.tekoms.co.rs/" frameborder="0"></iframe>

Prikaz u Browser-u


NOVO - DOPUNITE ZNANJE - WEB PROGRAMIRANJE (PHP, SQL)

Posle pređenih svih nastavnih jedinica u okviru Besplatne online obuke za web dizajn, obuku možete nadograditi odnosno dopuniti svoje znanje tako što će naučiti i web programiranje - PHP, SQL - izrada dinamičkih sajtova, online prodavnica. Kurs prati napisana skripta, izvorni kodovi i nekoliko desetina video nastavnih jedinica gde polaznik hronološki uči pisanje koda u PHP-u, testiranje skripti, korišćenje i rad sa Local serverom.

Cena obuke