chupok

Обратите внимание на БЭМ: посмотрите файловую структуру, правила именования блоков. Далее ознакомьтесь с очень интересной библиотекой компонентов: смотрите примеры компонентов, их код.

Посмотрите еще видео о редакторе БЭМ-проектов. Возможно, вам захочется реализовать подобный интерфейс.

Кстати, ответ на ваш вопрос можете также найти в виде доклада от гуру из самых разных контор (в основном Яндекс).

Думаю, что вы установили собственные шрифты через @font-face, при этом подключаемые файлы довольно долго грузятся (лучше использовать Google.Fonts, либо оптимизировать файлы). Потому браузер сначала выдает системные шрифты, а по завершении загрузки - декоративные.

<div><button>Вкл</button><button>Выкл</button></div>

* {
    margin: 0;
}
div {
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: auto;
    -khtml-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
div button {
    background: red;
    border: 0;
    cursor: pointer;
    display: block;
    float: left;
    outline: 0;
    padding: 3px 15px;
    position: relative;
    width: auto;
    -khtml-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
div button:first-child {
    background: green;
}

jsfiddle.net/qdw9kbdq/18

Уж не знаю, насколько поможет: Оформление карт Google "под себя" от Руселлер. Там же имеется ссылка на API от Google.

Нормально со времен браузерных войн.

Честно говоря, не совсем понял вопрос. Вам необходимо запретить изменение размеров textarea? Тогда так:

textarea {
resize: none;
}

Вам не нравятся инлайновые стили? Пишите:

textarea {
display: block;
}

Как обычно. Просто в CSS-файле указываете соответствующие параметры. При этом даже нет надобности динамически менять класс блоков в зависимости от устройства, либо элементам устанавливать несколько классов "на все случаи жизни" (по-моему, это бред). В первый файл сохраните стили для мобильной версии (без media), а во второй - стили для остальных устройств, используя код ниже.

Например, есть у вас на странице блок с классом test.

/* Смартфоны (портретный и ландшафтный режимы) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Здесь задаем стили для браузеров, чья минимальная ширина - 320px, максимальная - 480px. Далее - по аналогии. */
.test {
background: black;
}
}
 
/* Смартфоны (ландшафтный режим) */
@media only screen
and (min-width: 321px) {
.test {
background: red;
}
}

/* Смартфоны (портретный режим) */
@media only screen
and (max-width: 320px) {
.test {
background: blue;
}
}
 
/* Планшеты (портретный и ландшафтный режимы) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
.test {
background: yellow;
}
}
 
/* Планшеты (ландшафтный режим) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
.test {
background: grey;
}
}
 
/* Планшеты (портретный режим) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
.test {
background: green;
}
}
 
/* Ноутбуки и ПК */
@media only screen
and (min-width: 1224px) {
.test {
background: orange;
}
}
 
/* Большие дисплеи */
@media only screen
and (min-width: 1824px) {
.test {
background: pink;
}
}

Скорее всего вы используете какой-то плагин. Зайдите на официальный сайт плагина и посмотрите опции (option). Направление (горизонтальное, вертикальное) и многое другое изменяется в куске инициализации плагина, обычно расположенное в head страницы.

По поводу приложений не отвечу, но попробуйте восстановить сим-карты в офисах ваших операторов. Номера и тарифы останутся прежними, поменяют лишь сами "пластмасски".