-1

need some help. I created a webpage in bootstrap. My problem was in media queries for IPHONE 4 and IPHONE 5, they both have 320px on portrait. but when i viewed my form IPHONE 4 and IPHONE 5 don't have the same height. here's my code on media queries at 320px portrait. IPHONE 5 extends the height compare to IPHONE 4. how can i set the height on portrait of IPHONE4 and IPHONE 5 at 320px?

div#rightCol_form.container{
   width:100%;
   height:140%;
     }
Carlo Raybac
  • 1
  • 4

1 Answers1

0

these are the media queries for iphone: 5: 

/* iphone 5 Retina Display: for portrait */
@media screen and (device-aspect-ratio: 40/71) and (max-device-width: 640px) and (orientation:portrait) {}

/* iPhone 5 Retina Display: for landscape*/
@media screen and (device-aspect-ratio: 40/71) and (max-device-width: 640px) and (orientation:landscape) {}
/* iphone 4*/
@media screen and (device-aspect-ratio: 2/3) {}

Media Queries helpful link - iphones

Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50
  • thanks for the reply, i'll try this then i'll get back again if i will succeed with this media queries. by the way, what is the meaning of this "device-aspect-ratio: 40/71"? – Carlo Raybac Jun 15 '15 at 06:48
  • http://stackoverflow.com/questions/5725838/difference-between-aspect-ratio-and-device-aspect-ratio-in-css-media-queries read more there. – Coding Enthusiast Jun 15 '15 at 15:33
  • i tried the code you have given but still read the @media only screen (max-width:320 px) {div#rightCol_form.container{ width:100%; height:140%; } } – Carlo Raybac Jun 16 '15 at 05:19