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.
Try adding this in the <head> tag?
<meta name="viewport" content="width=device-width, user-scalable=no">
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" />
Related
I read this article https://css-tricks.com/snippets/html/responsive-meta-tag/ and followed tips by W3Schools, but I'm still confused with initial-scale=1.0.
I don't see the difference between this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and this:
<meta name="viewport" content="width=device-width">
I tested these code snippets in many browsers, and I cannot determine which one I need to use. If I omit initial-scale=1.0 will browsers somehow add it for me? It looks they will.
The "initial-scale=1.0" part sets the initial zoom level when the page is first loaded by the browser. "width=device-width" sets the width of the page to follow the screen-width of the device, depending on what they are using.
Here is a good link to read up on it:
https://www.w3schools.com/css/css_rwd_viewport.asp
"On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:" - MDN ,
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
I did use initial-scale=1, but I noticed that removing it - against recommendations on CSS Tricks and by the authors of UIkit (v2) - gave me a perfect, as-expected, initial scaling on page load using Chrome on Android and with the Silk browser on a Kindle. Including initial-scale=1 meant the pages were loading at some semi-random zoom level, which looked amateurish. Edge, Chrome and Firefox desktop browsers are fine, but I haven't tested more widely on mobile devices yet.
For Android, I'm leaving initial-scale=1 off and I'll need a very good reason to put it back on again.
<meta name='viewport' content='width=device-width'>
CSS tricks actually uses the above on its own (very fine) site
Just use initial-scale=1.0
You would see the difference when viewing your website on different mobile devices.
For example the page being a way larger width of the screen and you have a horizontal scrollbar. You may think use overflow-x: hidden but no just set the initial scale to 1 for all devices in the head
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Hi guys I hope there are someone that can give a solution for this:
When coding a responsive website I get the problem when the screen turns on a ipad it don't reset the zoom meaning that when users turn to vertical it will zoom in and you have to reload the page or zoom out to see the full design is there a way to force a reset on the zoom or reload when users turn the screen. I pref if the solution comes in css becuase it's only on ipad device the problem is and I can control this in the .ccs fil assignt to devices
I know there has been some questions about this but nothing of that I could use becuase I'm not trying to block that users can zoom in or out but I'm trying to reset the zoom on screen turn
Best regards
Lasse
Add the following meta tag in your HTML code (Inside head tag)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
My website is built using HTML5 Boilerplate, and is being cropped on the iPad when the iPad is positioned vertically, but appears the way it's supposed to when the iPad is horizontal. Here's the link to the site I built: http://designedbyallison.com/hhsc/
Basically, the area that shows the website is being scaled down while the website design elements themselves appear to be the right size within the iPad display area.
I've tried to locate which lines of code in the CSS or JavaScript files control this aspect of the website but can't figure it out. I have even tried removing the JavaScript and CSS within the html file and the scaling issue is still apparent. Any help is appreciated.
You may find the <meta name="viewport" /> tag helpful.
I'd start with
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
having finished a little webpage and giving it a basic layout, I decided to test what it'd look like using a mobile browser. So I installed the Android SDK with emulator, and as it turns out, the couple of elements on the page appear really small. I'd estimate about 80% of the page is currently empty background by default. However, when I zoom, it looks great, because the width:height ratio matches the phone's screen. That said, I'd prefer to leave the page unchanged, it just needs to be bigger as a whole.
Is there a way I can make my page appear zoomed-in on by default?
Try this:
<meta name="viewport" content="width=device-width">
for an initial scale of 1:1, add this:
<meta name="viewport" content="initial-scale=1.0">
I'm in the process of developping a Web Application for mobiles. I
went with web applications because to me it seems a winning situation
having to develop one application that could run also on iPhone /
Windows Mobile / Palm etc.
I started testing today after a few days of doing concepts, ideas and
designs and what I wanted to do was have a menu that sticks at the
bottom of the page. Exactly like the menu on the bottom in this iPhone
application screenshot :
Using CSS, I though it would be really easy to do this. Only using
position:fixed; bottom:0; would have done the trick but I have found
it doesn't behave the same on mobile browsers
I tried to split my page in 2 sections : 1 would be a scrollable div
(for the content) and the other one would be the bottom menu.
Scrollable divs also do not work on Android. I also tried using frames
with no luck either. Does anyone know of any way to re-create a menu
that would stick to the bottom of a page for mobile phones?
On my Android N1 with CyanogenMod i had this trouble too and the fix:
<meta
name="viewport"
content="width=100%,
initial-scale=1,
maximum-scale=1,
minimum-scale=1,
user-scalable=no"/>
Specifically the user-scalable=no; part, you can also put 0 instead of no.
Interestingly this breaks androids rendering of buttons, but all you have to do is set a background color to buttons.
Just add:
<meta name="viewport" content="width=device-width, user-scalable=no" />
to the page and you're set for Android 2.2+. This worked on a page I was testing on my phone. Source: When can I use CSS position:fixed?
This is supposed to work :)
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
Just got an upgrade to Android 2.2 (Froyo) on my HTC Desire, and I'm happy to say that position fixed now works, at least when you use the viewport meta tag to set initial-scale and width. Still doesn't seem to work on regular web pages though.
I confirm that using the meta name in your html header
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
you'll have a fixed div on scrolling vertical and horizontal on Android 2.2, 2.3 and up
and iOS 4 and up.
I made an example here:
https://dl.dropbox.com/u/908148/website/test-scroll.html