CODEWITHSUNDEEP
javascripthtmlcssbrowser
tkowt
tkowt

Reputation: 347

Why SP browser displays different font size from PC emulators browser in the same page

My two pictures show a same web page. One is accessed from iOS simulator and another is from PC simulator. Their displayed size is same(e.g. iPhone X) but, their font size are slightly different nevertheless same webpage.

enter image description here

Why do they do so? It may be clew that the page have iframe and the main head has

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

and iframe have

<meta name="viewport" content="width=275, height=742, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

the width and height calculated extracts omitting gaps. We want to know any possibilities that caused and welcome to any helps. Our goals is PC browser design and how do we make it same about sp browser?

Upvotes: 0

Views: 97

Answers (1)

tkowt
tkowt

Reputation: 347

In some smartphone browser, text-size-adjust property auto as default. It sometimes affects font-size unexpectedly.In our case,

 body {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
  }

the styles can make it disable. They needs to be in iframe if it affects iframe element styles.

Upvotes: 1

Related Questions