0

For content for a web page I'm building, I am setting the width at 700px. Strangely, on my Firefox browser (Ubuntu 16) it appears as 700px on my screen. On my Chrome browser (version 63), the content is expanded up to 1125 pixels. I really don't want my application giving such different results on different browsers.

Here is the code for a movie:

 <video preload muted autoplay loop 
         style = "width:700px;">
   <source src="http://www.w3schools.com/html/mov_bbb.mp4"
           type="video/mp4">
 </video>

Fiddle here in case anyone wishes to reproduce it: https://jsfiddle.net/kae4q601/232/

Similar code for an image:

 <h1> Hi I'm text how are you </h1>
 <img src="http://lifecdn.dailyburn.com/life/wp-content/uploads/2015/03/The-Nut-That-Could-Help-You-Live-Longer_2.jpg" style="width:700px; height:auto;">

Again, a fiddle that reproduces it on my end: https://jsfiddle.net/cortical_iv/kae4q601/233/

When I go into the developer tools and inspect the elements, it shows the image as being the correct (700px) width in each browser. So the browsers both clearly think they are showing the correct size.

Online people suggested going into Chrome settings and setting page zoom to 100%, but mine already has that setting. In both browswers, I hit ctrl-0 to ensure I hadn't accidentally magnified the viewport.

I have now realized even text is larger on Chrome, so it seems there is a general scaling issue in Chrome on my computer. My system is not set to scale at all.

cort
  • 89
  • 1
  • 9
  • is one of html5 component that difficult to control.. try to wrap the video on a div, and give that div width. `
    `     – aswzen Jan 23 '18 at 04:16
  • Unfortunately that seems to have not changed it. Modifying question to show more stuff I checked using dev tools. And also, your comment made me realize I don't need all that extra fluff in my code so simplifying the code/fiddle for better SSCCE. – cort Jan 23 '18 at 04:55
  • Does adding `height:auto` helps? – Ali Sheikhpour Jan 23 '18 at 05:02
  • @AliSheikhpour: no change. – cort Jan 23 '18 at 05:07
  • It sounds like Chrome just automatically scales everything by around 1.25. I found some fixes for Windows, but I am on Ubuntu. And frankly, if someone is on a high def device it won't be all that bad if my site is on the scale that they are used to. I guess I will just have to develop for multiple scales? If I "fix" this on my machine, that won't mean it is fixed for others, so I need to work with it and treat it as natural browser variation. Discussed here: https://www.howtogeek.com/278699/how-do-you-adjust-google-chromes-ui-scaling/ – cort Jan 23 '18 at 06:58
  • @cortical_iv Are you saying Chrome thinks your screen has `1.25dppx`, while other browsers don't? Odd. That isn't supposed to happen. – Mr Lister Jan 23 '18 at 08:29
  • @MrLister if you google it this changed in Chrome 54, it automatically started to scale things. I think I need to just eat this as it will happen in other browsers. Like I said even if I find a way to "fix" it on my computer, most other people using my app won't have that fix. I guess I could set the image width to `25vw` or something (though that is sort of ugly too having it change as the user adjusts their window). – cort Jan 23 '18 at 13:34

1 Answers1

0

Since version 54, Chrome automatically started to scale things depending on the device. This is expected behavior, and is not something you can "fix": it is a feature they put in to try to deal with high density displays. It is simply part of natural browser variation, and you should just do cross-browser testing to make sure that your site looks reasonable on a representative cross-section of devices and browsers for the intended audience.

For instance, you might need to use the media query to make your site more responsive, or use other tricks of the trade of responsive site design that would go beyond the scope of the original question (the kind of thing discussed here: Responsive design with media query : screen size?).

The change with Chrome 54 is discussed here:
https://superuser.com/questions/1139259/how-to-adjust-ui-scaling-for-chrome

cort
  • 89
  • 1
  • 9