我有一个负责任的网站，但正如你可以看到的图片（http://postimg.org/image/xoq7eyg1b/），它不是完全适合移动设备，因为组件显示的很小。 为了避免明确地调整每一个的大小，有没有办法一次扩大所有内容？
打印页面代码：
<div class='row' id='content-wrapper'>
<div class='col-xs-12'>
<div class='page-header'>
<h1 class='pull-left'><i class='icon-stethoscope'></i> Doenças Crônicas</h1>
</div>
</div>
</div>
<div id="divGrid">
<div class='col-sm-12 col-md-3'>
<div style="width:101% !important" class="box">
<div class="box-header box-header-small dark-orange-background">
<div class="title">
<div class="icon-search"></div>
Pesquisa
</div>
<div class='actions'>
<a class="btn box-collapse btn-xs btn-link" href="#"><i></i></a>
</div>
</div>
<div class="box-content">
<form class="form form-horizontal" method="post" action="#" accept-charset="UTF-8">
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="nome">Nome</label>
<div class="col-md-8">
<input class="form-control input-sm" style="height:33px !important;font-size:medium !important" id="nome" placeholder="Ao menos 3 letras" type="text" data-bind="value: model.Nome" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="Email">E-mail</label>
<div class="col-md-8">
<input class="form-control input-sm" style="height:33px !important;font-size:medium !important" id="Email" placeholder="Ao menos 3 letras" type="text" data-bind="value: model.Email" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="Sexo">Sexo</label>
<div class="col-md-8">
<select id="Sexo" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.Sexo, ">
<option value="">-- Todos --</option>
<option value="M">Masculino</option>
<option value="F">Feminino</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="IsMonitorado">Monitorado</label>
<div class="col-md-8">
<select id="IsMonitorado" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.IsMonitorado, ">
<option value="">-- Todos --</option>
<option value="1">Sim</option>
<option value="0">Não</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" style="text-align: left;" for="FaixaIdade">Faixa Idade</label>
<div class="col-md-8">
<select id="FaixaIdade" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.FaixaIdade, ">
<option value="">-- Todos --</option>
<option value="1">0 a 18 anos</option>
<option value="2">19 a 23 anos</option>
<option value="3">24 a 28 anos</option>
<option value="4">29 a 33 anos</option>
<option value="5">34 a 38 anos</option>
<option value="6">39 a 43 anos</option>
<option value="7">44 a 48 anos</option>
<option value="8">49 a 53 anos</option>
<option value="9">54 a 58 anos</option>
<option value="10">59 anos ou mais</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label " style="text-align: left;" for="situacao">Situação</label>
<div class="col-md-8">
<select id="situacao" class="form-control input-sm" style="height:33px !important;font-size:medium !important" data-bind="value: model.StAtivo, ">
<option value="">-- Todos --</option>
<option value="1">Ativo</option>
<option value="0">Inativo</option>
</select>
</div>
</div>
<div class="form-actions form-actions-padding-xs">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<button class="btn btn-sm" type="button" data-bind="click: limpar">Limpar</button>
<button class="btn btn-primary btn-sm" type="button" data-bind="click: submit"><i class="icon-search"></i> Pesquisar</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class='col-sm-12 col-md-9'>
<div style="width:101% !important" data-bind="kendoGrid: model.items"></div>
</div>
</div>
<div class="modal fade" id="NovoPaciente" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header blue-background">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-white" id="myModalLabel"><i class="icon-user"></i> NOVO PACIENTE</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Nome/Identificação*</label>
<input class='form-control' type='text' data-bind="value: model.Nome, valueUpdate:'afterkeydown'">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Endereço*</label>
<textarea class='form-control' rows='2' data-bind="value: model.Endereco"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Telefone</label>
<input class='form-control' type="text" data-bind="masked: model.Telefone, mask: '(99) 9999-9999'" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Sexo*</label>
<select class="form-control" data-bind="options: model.ComboSexo, optionsText: 'Text', optionsValue: 'Value', optionsCaption: '-- Selecione --', value: model.Sexo, "></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Nascimento*</label>
<div class="form-group">
<input class="form-control" id="txtDtNascimento" type="text" data-bind="value: model.DtNascimento, datepicker: model.DtNascimento, datepickerOptions: { altFormat: 'dd/mm/yyyy' } " />
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='tipoDocumento'>Unidade*</label>
<select id="tipoDocumento" class="form-control" data-bind="click: function(e) { obterEquipesUnidade(this) }, options: model.ComboUnidade, optionsText: 'Text', optionsValue: 'Value', value: model.IdUnidade, optionsCaption: '-- Selecione --', "></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Equipe</label>
<select class="form-control" data-bind="options: model.comboEquipe, optionsText: 'Descricao', optionsValue: 'Id', optionsCaption: '-- Selecione --', value: model.IdEquipe, "></select>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='tipoDocumento'>Assinatura do TCLE</label>
<br />
<label>
<input type="radio" name="Tcle" value="true" data-bind="checkedRadioToBool: model.Tcle" />
Sim
</label>
<label>
<input type="radio" name="Tcle" value="false" data-bind="checkedRadioToBool: model.Tcle" />
Não
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Altura</label>
<input class='form-control' type='text' id="Altura" data-bind="value: model.Altura, masked: model.Altura, mask: '0.00'">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Chave de acesso</label>
<input class='form-control' type="text" data-bind="numeric: number, value: model.ChaveAcesso" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>E-mail<span data-bind="text: model.Obrigatorio"></span></label>
<input class="form-control" type="email" data-bind="value: model.Email" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Outras Informações</label>
<textarea class='form-control' rows='2' data-bind="value: model.Observacao"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Senha<span data-bind="text: model.Obrigatorio"></span> </label>
<input type="password" class='form-control' data-bind="value: model.Senha" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class='form-group'>
<label for='inputText'>Confirmação<span data-bind="text: model.Obrigatorio"></span> </label>
<input type="password" class='form-control' data-bind="value: model.ConfirmSenha" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bind="click: cancel">Fechar</button>
<button type="button" class="btn btn-primary" data-bind="click: save">Salvar</button>
</div>
</div>
</div>
</div>
答案 0 :(得分：2)
尝试增加font-size中的<body>。
@media screen (max-device-width:$mobile-breakpoint) {
body {
font-size:120%;
}
}
此外，您可以使用em单位而不是像素（我不知道您是否这样做，因为您没有发布您的CSS）。这些em单元始终与font-size标记上设置的<body>相对。您可以使用媒体查询来增加或减少一个em单位的大小，具体取决于视口。
答案 1 :(得分：1)
在Bootstrap中，字体大小以em为单位给出，因此您可以在CSS中设置基线字体大小，并且所有字体都应相应缩放。
创建一个新的CSS页面，因此您不会直接编辑bootstrap.css。 称之为custom.css。它应该包含：
html { font-size: 16px; }
在引导程序的引用下面添加对custom.css的引用，类似这样（你没有显示代码的那部分，所以我只是在这里猜测）：
<link rel="stylesheet" href="/path/to/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/css/bootstrap-theme.css"/>
<link rel="stylesheet" href="/path/to/css/custom.css"/>
custom.css中的代码应覆盖最初设置的基线字体。如果为html设置css不起作用，请尝试body。