Hello,

I know that, in one of questions, somebody said it is not wise to specify display/screen size, but the problem is that, the iOS app developer messed and mixed the website with Bootstrap and third-party codes, and since they knew me, they delivered me the website in my hands and I found a lot and a lot of mistakes and of problems he made in the website. I worked a lot to fix everything. But as he did not write in pure Bootstrap because of third-party codes, I had to specify display/screen size of mobile, tablet and computer. If he wrote in pure Bootstrap without third-party codes, I would not need to specify.

I know I should rewrite the site in pure Bootstrap or without Bootstrap (because I am a purist), but the CEO says they need to introduce their own app to the public next 2 weeks and next month.

I divided 6 specific media queries – iPhone 5 and up – portrait with or without full screen (because of Safari menu bar) and landscape, and iPhone 6 and up – portrait with or without full screen (because of Safari menu bar) and landscape.

• If I added aspect-ratio only to iPhone 5 with full screen and also to iPhone 6 with and without full-screen and landscape, everything worked, until...
• I redesigned for iPhone 5 without full screen and it got the media query from iPhone 6, and added aspect-ratio to iPhone 5 without full screen, and all iPhone 5 and 6 ended up got each other's media-queries and also got the standard computer's media-query.

If this is impossible, I'll try to convince the CEO to let me rewrite the site, while I will keep only the bottom sheets, which are totally good for every device. Or I think of using JavaScript to detect device agent and switch the CSS media-query file.

Here is my small code snippet of 6 media queries:

/* iPhone 5, 5C, 5E and 5S */

/* Portrait with fullscreen */
@media only screen
  and (max-width: 320px)
  and (max-height: 568px)
  and (aspect-ratio: 40/71)
  and (orientation: portrait) {}

/* Portait without fullscreen */
@media only screen
    and (max-width: 320px)
    and (max-height: 460px)
    and (aspect-ratio: 40/71)
    and (resolution: 192dpi)
    and (orientation: portrait) {}

/* Landscape */
@media only screen
    and (max-width: 568px)
    and (max-height: 320px)
    and (aspect-ratio: 40/71)
    and (orientation: landscape) {}

/* iPhone 6 and 6S */

/* Portait with fullscreen */
@media only screen
  and (max-width: 375px)
  and (max-height: 667px)
  and (aspect-ratio: 667/375)
  and (orientation: portrait) {}

/* Portrait without fullscreen */
@media only screen
  and (max-width: 375px)
  and (max-height: 559px)
  and (aspect-ratio: 667/375)
  and (orientation: portrait) {}

/* Landscape */
@media only screen
  and (max-width: 667px)
  and (max-height: 375px)
  and (aspect-ratio: 667/375)
  and (orientation: landscape) {}

Update

I investigated the cause which required me to create several specific display sizes. I found some third-party codes came from Firebase, as unit-wrapper, box-image-about, show-r and hide-r. I found bad idea to mix Firebase and Bootstrap. These codes not part of Bootstrap, third-part codes and ones from Firebase are isolated do not allow the automatic and unspecific responsive, and require me to create many specific media queries.