html - Why is text within a fieldset appearing sometimes larger on mobile devices? -

-

this question has answer here:

i found strange chrome “feature” don't understand. when using fieldset responsive design, text within fieldset appear bigger compared other contents of page.

when remove few characters text, takes same size other block on page.

for instance, following page generated chromium 49 using device mode. display similar on android smartphone running chrome. firefox in responsive design mode doesn't have glitch.

enter image description here

this the corresponding code. there no external css files.

<html> <head> <style> body{font-size:.8em;} </style> <body> <div>     <p>         lorem ipsum dolor sit amet, consectetur adipiscing elit. morbi porta sus cipit ultricies.         sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.         vestibulum aliquam, neque sed ullamcorper tristique, arcu augue condimen tum orci, id vulputate nisl mauris non mas.     </p>     <fieldset>         <p>             lorem ipsum dolor sit amet, consectetur adipiscing elit. morbi porta  suscipit ultricies.             sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.             vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond imentum orci, id vulputate nisl mauris non mas.         </p>     </fieldset>     <fieldset>         <p>             lorem ipsum dolor sit amet, consectetur adipiscing elit. morbi porta  suscipit ultricies.             sed velit quam, viverra eget accumsan dapibus, finibus eu lorem.             vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond imentum orci, id vulputate nisl mauris non ma.         </p>     </fieldset> </div> </body> </html>

in piece of code, first <p> of page , 1 inside first <fieldset> contain same text. paragraph in second <fieldset> contains 1 character less.

what happening?

note ugly workaround consists of specifying fieldset{font-size:.999em;} in styles. makes 3 paragraphs appear similar. being said, i'm more interested origin of feature/glitch rather workaround/hack.

i discovered behavior design.

in order prevent chrome on android or chromium in device mode adjust font size depending on content of block, following meta element should added:

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

source: joe derose's answer similar question.

further reading: using viewport meta tag control layout on mobile browsers @ mdn.


Comments

Post a Comment

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more