I've found this as a workaround:
/* fix font sizes */
body {
font-size: 14px;
line-height: 18px;
}
@media screen and (-webkit-device-pixel-ratio: 0.75) {
body {font-size: 10.5px;}
li {line-height: 14px; }
}
/* desktop browsers */
@media screen and (-webkit-device-pixel-ratio: 1.0) {
body {font-size: 14px;}
li {line-height: 20px; }
}
/* e.g. Google Nexus S (Samsung Galaxy S) */
@media screen and (-webkit-device-pixel-ratio: 1.5) {
body {font-size: 16px;}
li {line-height: 24px; }
}
/* e.g. iPad */
@media screen and (-webkit-device-pixel-ratio: 2.0) {
body {font-size: 24px;}
li {line-height: 36px; }
}
However, bootstrap still messes up by using px sizes, instead of ems or
percentages, e.g.
.btn-large {font-size: 15px;}
Could these please be fixed in bootstrap trunk?
On Sunday, August 12, 2012 1:01:52 AM UTC+3, Adam Powell wrote:
>
> There is a jQuery (but not jQuery mobile) adapted version of Bootstrap
> that you can download/fork on GitHub...I am going to use it within my
> Bootstrap sites as I think the accordions are better looking (with
> gradients) and more intuitive with the little caret that rotates from
> horizontal to vertical on the open tab.
>
> That said, I thought the same thing about the font size in px but going
> through the LESS (which I was unfamiliar with previous to Bootstrap) it
> turns out there's a good reason. LESS has simple math functions. For
> instance it takes the height of the navbar, subtracts the height of the
> 'brand' and splits the balance between top and bottom padding (margin?) so
> that the brand is centered in the navbar, regardless of the font size you
> choose, without you having to do any box math.
>
> As such, I leave the fonts in px while I am developing and shortly before
> going live I go through the finalized CSS and adapt it with %, em, where
> appropriate.
>
>
> On Saturday, August 11, 2012 11:48:17 AM UTC-5, marius wrote:
>>
>> A complementary approach might also include fixing bootstrap. This messes
>> things up as it uses px:
>>
>> body {
>> font-size: 13px;
>> line-height: 18px;
>> }
>>
>> Not that my request comes from avoiding to use jQuery mobile or sencha
>> touch, so use-cases with one of these & bootstrap wouldn't be needed IMHO.
>> Using one of these frameworks fixes font sizing / default looks.
>>
>> On Saturday, August 11, 2012 6:27:59 PM UTC+3, Victor Miclovich wrote:
>>>
>>> sounds like a good idea... but one of the example starters uses
>>> responsive-bootstrap; making it more appealing to mobile too; Being
>>> bootstrap, perhaps use-cases with jQuery mobile or sencha touch could prove
>>> quite useful to the general community... :)
>>>
>>> On Sat, Aug 11, 2012 at 6:25 PM, marius <[email protected]> wrote:
>>>
>>>> Hello,
>>>>
>>>> Is there any sample I can use/copy for building a mobile-only site with
>>>> Bootstrap?
>>>>
>>>> For example, how to set font size to be just perfect on a mobile phone
>>>> (with various screen resolutions), or having list entries similar to
>>>> jQuery
>>>> mobile?
>>>> I know it can all be done with CSS, but I'd really use something
>>>> already done. Maybe this could also be added to
>>>> http://twitter.github.com/bootstrap/examples.html as a "Mobile-only
>>>> starter template".
>>>>
>>>> Thanks
>>>>
>>>
>>>
