Question

我尝试更改网络表单上的字体大小，以便在移动设备（目前使用Android）上显示时看起来更小。通过更改css文件以使文本显示为font-size：从浏览器查看时它很小但是工作正常但是当在手机上查看同一页面时，文本似乎不会变小，所以一切（包括控件）看起来都很大我使用bootstrap但不确定如何使用自适应字体大小，但我希望上面的工作，这里是标题

<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">

Answer 1

在标题中包含此<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;
    }
}

Answer 2

在头标记中尝试此链接

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

如果该链接不适合您，则需要使用您需要显示的字体为您所需的屏幕尺寸编写媒体查询。

移动设备上的字体大小很大

2 个答案: