Размер шрифта на мобильном устройстве большой

Я пытаюсь изменить размер шрифта на моей веб-форме, чтобы он выглядел меньше, если он отображается на мобильном устройстве (в настоящее время используется Android). Изменив файл css, чтобы отобразить текст, чтобы сказать размер шрифта: маленький, если смотреть в браузере, он отлично работает, но при просмотре одной и той же страницы на телефоне текст не выглядит меньше, поэтому все (включая элементы управления) выглядят огромными Им с помощью начальной загрузки, но не уверены в том, как использовать адаптивные размеры шрифтов, однако я ожидал бы выше, чтобы работать, вот заголовокРазмер шрифта на мобильном устройстве большой

<head runat="server"> 

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

    <meta charset="utf-8"> 

    <meta name="generator" content="Bootply" /> 

    <meta name="viewport" content="width=device-width, initial-scale=1">

источник

2014-12-09 AShah

Не могли бы вы добавить скрипку? – arshad

С тех пор я попытался использовать .small и/или .h6 bootstrap css, и текст теперь уменьшился, но моя таблица gridview не помещается на страницу мобильного телефона, поэтому попробуйте посмотреть на отзывчивый шрифт css – AShah

Включите эту <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> в своем заголовке, и вы можете использовать медиа-запросы для мобильных устройств в соответствии с Chris Coyer-х CSS-tricks:

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    .targetClass { 
     font-size: 2em; 
    } 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
    .targetClass { 
     font-size: 2em; 
    } 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
    .targetClass { 
     font-size: 2em; 
    } 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
    .targetClass { 
     font-size: 2em; 
    } 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    .targetClass { 
     font-size: 2em; 
    } 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    .targetClass { 
     font-size: 2em; 
    } 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
    .targetClass { 
     font-size: 2em; 
    } 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
    .targetClass { 
     font-size: 2em; 
    } 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
    .targetClass { 
     font-size: 2em; 
    } 
}

источник

2014-12-09 13:12:19 mijopabe

спасибо, что я думаю, что это работает - в чем разница между этим методом и способом начальной загрузки? есть ли разница? Есть ли способ достичь вышеуказанного с помощью бутстрапа? – AShah

@AShah Bootstrap - это структура, которая заботится о самых случаях. Есть исключения, для которых лучше всего добавить настройки к отдельному файлу css, и это все еще способ Bootstrap. Вы распространяете Bootstrap, что-то, что каждый веб-сайт должен будет сделать рано или поздно, или все они будут выглядеть одинаково :) Если бы это помогло, я был бы признателен, если бы вы приняли ответ как правильный или если есть дополнительная помощь, как. – mijopabe

Попробуйте эту ссылку в голове теге

<head> 
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/> 
</head>

Если ссылка не работает для вас, тогда вам нужно написать медиа-запросы для требуемого размера экрана с помощью шрифтов, которые вам нужно отобразить.

источник

2014-12-09 12:10:35 sitaram9292

Это только ссылки на доступные Google шрифты. Он не меняет размер шрифта, добавляя его в голову. – mijopabe

@mijopabe, тогда вам нужно написать медиа-запросы для требуемого размера экрана с помощью шрифтов, которые вам нужно отобразить. – sitaram9292

Я согласен, но это может отразиться на вашем ответе, поскольку я предполагаю, что автор не знает, испытывает ли он трудности с этим. :) – mijopabe

Размер шрифта на мобильном устройстве большой

ответ

Смежные вопросы