2

everyone. I am writing a website and testing it on mobile devices. It is deployed here: http://vizio.distro.tv/web.html

When I rotate my phone to horizontal, sometimes the video becomes bigger than the screen, and I have to use my fingers to zoom in to make it fit the screen. Then when I rotate my phone to vertical, the video does not go back to its original position in the player container, it is bigger and goes beyond the screen. This problem is more common for "Live Channel" videos. However, when I test it on Chrome's developer tool (using its mobile device tool), everything works fine.

Can anyone help me find what the problem is? I can provide the code if needed.

Jiadai Liu
  • 33
  • 2

2 Answers2

2

Wrap your video player into a <div></div> you can use the media queries of CSS to do that job for you. CSS mostly does the job when it comes to webpage responsiveness.

Also media queries are partnered with this meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
ailia
  • 629
  • 6
  • 9
  • Thank you, but I do have this tag in the head. – Jiadai Liu Oct 03 '19 at 17:28
  • That meta tag is just the start, the real deal is coding the media queries in CSS ..take a reference on this one https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile – ailia Oct 03 '19 at 17:34
  • You may also want the logic about media queries https://css-tricks.com/logic-in-media-queries/ – ailia Oct 03 '19 at 17:35
  • I do have CSS media query logic that controls the video player. And I see it is working when I rotate the google Chrome developer tool in iPhone X, 7, 8, pixel 2 etc. But when rotating on an actually phone (my iPhone X), the player does not resize properly. You can open it on a browser and inspect it in mobile tool, and then open the website on your actual phone to see its behavior is different when you rotate. – Jiadai Liu Oct 04 '19 at 01:02
  • 1
    you have a typo in your answer: `withd` – Dara Java Oct 04 '19 at 10:10
  • @DaraJava LOL I thanks for pointing out, that made me check my code too and it's a typo too but it still works even there's a typo. JiadaiLiu: I can't very well point out that problem in iPhone X because I don't have that phone and I'm not familiar with the OS (I'm not sure) maybe it's a bug in their own platform or app... – ailia Oct 04 '19 at 16:26
1

Try adding this in the <head> tag?

<meta name="viewport" content="width=device-width, user-scalable=no">
Dara Java
  • 2,410
  • 3
  • 27
  • 52