Iframe в svg-границе адаптивен

Question

Пытаюсь сделать как планшет с iframe. (Демо: http://tab.vn-rp.cz/). В некотором разрешении это выглядит нормально, но когда я перетаскиваю окно и начинаю менять разрешения, становится хуже, и iframe выходит за пределы границы svg. У меня просто уродливый код ниже:

            /*iPhone4 iframe*/
        html, body {
            margin: 0;
            height: 100%;
            overflow: hidden;
              -webkit-touch-callout: none; /* iOS Safari */
              -webkit-user-select: none; /* Safari */
               -khtml-user-select: none; /* Konqueror HTML */
                 -moz-user-select: none; /* Old versions of Firefox */
                  -ms-user-select: none; /* Internet Explorer/Edge */
                      user-select: none;
        }

        @media only screen and (max-height: 1000px) {
            #iphone4 {
                background-image: url("Tablet.svg");
                background-repeat: no-repeat;
                height: 100%;
                width: 60%;
                margin: auto;
                position: relative;

            }

            #browser {
                height: 85.8%;
                width: 96%;
                position: absolute;
                top: 2.4%;
                border-radius: 3%;
                left: 2.1%;
                border: 0;
            }
        }

        @media only screen and (min-height: 1000px) and (max-height: 1070px) {
            #iphone4 {
                background-image: url("Tablet.svg");
                background-repeat: no-repeat;
                height: 100%;
                width: 65%;
                margin: auto;
                position: relative;

            }

            #browser {
                height: 75.2%;
                width: 96%;
                position: absolute;
                top: 2%;
                border-radius: 3%;
                left: 2.1%;
                border: 0;
            }
        }

        @media only screen and (min-height: 1070px) {
            #iphone4 {
                background-image: url("Tablet.svg");
                background-repeat: no-repeat;
                height: 100%;
                width: 60%;
                margin: auto;
                position: relative;

            }

            #browser {
                height: 76.9%;
                width: 96%;
                position: absolute;
                top: 2.2%;
                border-radius: 3%;
                left: 2.1%;
                border: 0;
            }
        }

        @media only screen and (max-height: 1000px) {
            .panilek {
                position: absolute;
                width: 97%;
                margin-top: 825px;
                margin-left: 20px;
            }

            .back {
                position: absolute;
                width: 1.5%;
                margin-top: 830px;
                margin-left: 300px;
            }

            .home {
                position: absolute;
                width: 1.6%;
                margin-top: 830px;
                margin-left: 550px;
            }

            .right {
                position: absolute;
                width: 1.9%;
                margin-top: 833px;
                margin-left: 800px;
            }
        }

        @media only screen and (min-height: 1000px) and (max-height: 1070px) {
            .panilek {
                position: absolute;
                width: 97%;
                margin-top: 782px;
                margin-left: 20px;
            }

            .back {
                position: absolute;
                width: 1.5%;
                margin-top: 790px;
                margin-left: 240px;
            }

            .home {
                position: absolute;
                width: 1.6%;
                margin-top: 790px;
                margin-left: 520px;
            }

            .right {
                position: absolute;
                width: 1.9%;
                margin-top: 790px;
                margin-left: 785px;
            }
        }

        @media only screen and (min-height: 1070px) {
            .panilek {
                position: absolute;
                width: 97%;
                margin-top: 825px;
                margin-left: 20px;
            }

            .back {
                position: absolute;
                width: 1.5%;
                margin-top: 830px;
                margin-left: 300px;
            }

            .home {
                position: absolute;
                width: 1.6%;
                margin-top: 830px;
                margin-left: 550px;
            }

            .right {
                position: absolute;
                width: 1.9%;
                margin-top: 833px;
                margin-left: 800px;
            }
        }

- HTML Код

Есть ли более эффективный способ сделать это? Если так, я буду так счастлив! Всем хорошего дня!