HTML масштаб для полного экрана - PullRequest
Новая
       5

HTML масштаб для полного экрана

1 голос
/ 02 августа 2020

Я пытаюсь увеличить несколько элементов, чтобы они занимали весь экран на мобильных устройствах. Код: 

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
            <meta http-equiv="Pragma" content="no-cache" />
            <meta http-equiv="Expires" content="0" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            
    
        </head>
        <body>
            <canvas hidden id='textCanvas' width=400 height=300></canvas>
            <br>
    
            <div>
                <label for='place'>Place:</label><br>
                <input id='place' type='text' maxlength="15"><br>
                <label for='sun'>Sun:</label><br>
                <input id="sun" type="number"><br>
                <label for="shadow">Shadow:</label><br>
                <input id="shadow" type="number"><br>
                <br>
                <button>Send</button>
                <button>Clear screen</button>
                <br><br>
            </div>
        </body>
    </html>

Как это выглядит по сравнению с тем, что я хочу:

enter image description here введите описание изображения здесь

Я могу добиться этого, установив: 

initial-scale=2

Но я думаю, это не зависит от разрешения?

Ответы [ 2 ]

0 голосов
/ 02 августа 2020

Попробуйте это. 

 <html>
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
            <meta http-equiv="Pragma" content="no-cache" />
            <meta http-equiv="Expires" content="0" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />

        <style>
              .input {
                  width: 50%;
                  font-size: 25px;
               }

              #label  {
                 font-size: 25px;
               }
    
             .button {
                padding: 15px 32px; 
                margin: 4px 2px;
              }

             .button1 {
                font-size: 25px;
             }

        </style>

        </head>

        <body>
            <canvas hidden id='textCanvas' width=400 height=300></canvas>
            <br>
    
            <div>
                <label for='place' id="label">Place:</label><br>
                <input class="input" id='place' type='text' maxlength="15"><br>
                <label for='sun' id="label">Sun:</label><br>
                <input class="input" id="sun" type="number"><br>
                <label for="shadow" id="label">Shadow:</label><br>
                <input id="shadow" type="number" class="input"><br>
                <br>
                <button class="button button1">10px</button>
                <button class="button button1">Clear screen</button>
                <br><br>
            </div>
        </body>
    </html>
0 голосов
/ 02 августа 2020

Лучшим способом, конечно же, было бы - использовать запросы, отвечающие за медиа, - для единообразия, и я предполагаю, что вы не хотите, чтобы потребитель вручную увеличивал масштаб страницы, чтобы «взять весь экран на мобильных устройствах», в котором медиа-запрос всегда делает работа 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <style>
            @media only screen and (max-width: 600px) {
              input {
                width: 100%;
              }
              label, input, button {
                font-size: 25px;
              }
            }
        </style>


    </head>
    <body>
        <canvas hidden id='textCanvas' width=400 height=300></canvas>
        <br>

        <div>
            <label for='place'>Place:</label><br>
            <input id='place' type='text' maxlength="15"><br>
            <label for='sun'>Sun:</label><br>
            <input id="sun" type="number"><br>
            <label for="shadow">Shadow:</label><br>
            <input id="shadow" type="number"><br>
            <br>
            <button>Send</button>
            <button>Clear screen</button>
            <br><br>
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...