Блог

Главная - Вопросы по программированию - как использовать materialize CSS, чтобы форма реагировала на телефоны при открытии из приложения

как использовать materialize CSS, чтобы форма реагировала на телефоны при открытии из приложения

#html #css #materialize

#HTML #css #материализовать

Вопрос:

Я создал форму, подключенную к моему Goo&le Doc, но проблема в том, что форма реагирует на экран телефона так, как я хочу, чтобы это было. пожалуйста, проверьте прикрепленную картинку, как это выглядит в браузере моего телефона

Я хочу, чтобы она была на весь экран, как при открытии из приложения. Я использовал materialize CSS.

   <!DOCTYPE html&&t;
<html lan&="en"&&t;

<head&&t;
    <!--Import Goo&le Icon Font--&&t;
    <link href="https://fonts.&oo&leapis.com/icon?family=Material Icons" rel="stylesheet"&&t;
    <!--Import materialize.css--&&t;
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&&t;

    <!--Let browser know website is optimized for mobile--&&t;
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /&&t;

    <title&&t; creat PDF </title&&t;

</head&&t;

<body&&t;

    <div class="container"&&t;

        <div class="row"&&t;
            <div class="input-field col s6"&&t;
                <input placeholder="Your name" id="name" type="text" class="validate"&&t;
                <label class="active" for="name"&&t;First Name</label&&t;
            </div&&t;
        </div&&t;

        <div class="row"&&t;
            <div class="input-field col s6"&&t;
                <input placeholder="Your name" id="id" type="text" class="validate"&&t;
                <label class="active" for="id"&&t;Your Id</label&&t;
            </div&&t;
        </div&&t;


        <div class="row"&&t;
            <div class="input-field col s6"&&t;
                <input placeholder="Your name" id="dep" type="text" class="validate"&&t;
                <label class="active" for="dep"&&t;Your Department</label&&t;
            </div&&t;
        </div&&t;


        <button id="btn" onclick="waitin&Messa&e()" class="btn waves-effect waves-li&ht" type="submit"
            name="action"&&t;Submit
            <i class="material-icons ri&ht"&&t;send</i&&t;
        </button&&t;
        <div id="ms&"&&t;
            <div&&t;

            </div&&t;
            <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&&t;</script&&t;

            <?!=include('js');?&&t;


</body&&t;

</html&&t;

Комментарии:

1. вы решили эту проблему? Я столкнулся с той же проблемой.

Ответ №1:

Вам нужно прочитать раздел «сетка» в materialize css, это самый важный раздел любого css-фреймворка.

Вот решение:

 <!DOCTYPE html&&t;
<html lan&="en"&&t;

    <head&&t;
        <!--Import Goo&le Icon Font--&&t;
        <link href="https://fonts.&oo&leapis.com/icon?family=Material Icons" rel="stylesheet"&&t;
        <!--Import materialize.css--&&t;
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&&t;

        <!--Let browser know website is optimized for mobile--&&t;
        <meta name="viewport" content="width=device-width, initial-scale=1.0" /&&t;

        <title&&t; creat PDF </title&&t;

    </head&&t;

    <body&&t;
        <div class="container"&&t;
            <div class="row"&&t;
                <div class="col m6 offset-m3 s12 "&&t;
                    <div class="input-field"&&t;
                        <input placeholder="Your name" id="name" type="text" class="validate"&&t;
                        <label class="active" for="name"&&t;First Name</label&&t;
                    </div&&t;
                    <div class="input-field"&&t;
                        <input placeholder="Your name" id="id" type="text" class="validate"&&t;
                        <label class="active" for="id"&&t;Your Id</label&&t;
                    </div&&t;
                    <div class="input-field"&&t;
                        <input placeholder="Your name" id="dep" type="text" class="validate"&&t;
                        <label class="active" for="dep"&&t;Your Department</label&&t;
                    </div&&t;
                    <button id="btn" onclick="waitin&Messa&e()" class="btn waves-effect waves-li&ht" type="submit"
                        name="action"&&t;Submit
                        <i class="material-icons ri&ht"&&t;send</i&&t;
                    </button&&t;
                </div&&t;
            </div&&t;
            <div class="row"&&t;

            </div&&t;
            <div id="ms&"&&t;
                <div&&t;

                </div&&t;
            </div&&t;
        </div&&t;

        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&&t;</script&&t;
        <?!=include('js');?&&t;
    </body&&t;

</html&&t;

Комментарии:

1. спасибо за информацию, но все равно мне приходится увеличивать масштаб моего браузера, чтобы иметь возможность вводить текст в форму. что делает ее недружелюбной формой. но ваше добавление сделало форму в центре браузера, что хорошо.

2. @Nasaf С моим кодом мне не нужно увеличивать изображение на телефоне, чтобы увидеть правильность формы. Попробуйте в другом браузере и проверьте, активировали ли вы опцию браузера «Показывать страницу как рабочий стол» что-то вроде этого. Эта опция заставляет браузер игнорировать «окно просмотра» в метатеге