Using the YouTube iFrame API to embed a video I have come across a strange bug.
The bug is only apparent on Mobile Safari (iPad3, mini and iPhone)
No matter what I do to set a specific height or width the links under the video do not work. It's as if the iFrames height is not being honoured by safari.
After about 4-5 lines the links start working again.
I have seen one article which says you need to set the attribute scrolling="no" on the iframe but this is YouTube API embed so not possible.
Demo below:
http://jsfiddle.net/sidonaldson/rqRvx/2
player = new YT.Player('player', {
height: '200',
width: '200',
videoId: 'J---aiyznGQ'
});
I'm experiencing a similar issue on mobile Safari on the iPhone. Loading multiple YouTube videos "disables" any links rendered below them and only allows you to play the videos in the order they were loaded. It's a very weird behaviour and what I've also found is that when you play the last video, the links become clickable again.
What I've discovered is that this happens only when the viewport meta tag is used.
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Although removing it fixes the problem, I'm not sure this is something you'll want to do for a mobile web app.
Related
Perhaps a bit foolishly, I have chosen to do my portfolio site with two technologies that I have never worked with before - Tailwind and NextJS.
while developing the portfolio, I have opened it via my mobile browser and was surprised to see that the components are rendering on half screen only. This does not happen when I refit the device width manually in the browser on the desktop.
In index.js I have the following meta tag, which I thought could fix the issue
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Would anyone have idea why that happens?
My code is deployed to github
Many thanks,
Zan
Your parent images have a fixed width, try to remove it, or add max-width.
I have a very interesting case with a website on WordPress. All responsive design is done well and it looks awesome on mobile devices. But in a very particular case, everything looks like a mess - the fonts on the website look very big, all the elements in the Slider Revolution slides also look not in place.
The issue appears when the user has set the Text size of the mobile device to Extra large. This is done in settings on the mobile phone. After that when you browse the website via the Facebook In-App Browser or Firefox, the described issue appears. In Chrome and Opera, it looks fine.
I have <meta name="viewport" content="width=device-width, initial-scale=1"> in the header. Also tested
-webkit-text-size-adjust: none;
text-size-adjust: none;
But I don't see any improvement. Any ideas about what might be the problem?
I am building a web application using Materialize as a framework. The fact is that the web application looks good on a computer screen, and even on a browser simulating a mobile screen, but very small on a physical mobile screen.
The only solution I have found has been to add a media query in the CSS file like this
html {
zoom: 2;
}
I also included the meta tag just after the head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
The result is not bad, but the problem now is that some Materialize pop-ups (such as date pickers or time pickers) and text fields appear cut off
I'd appreciate any help
I am developing a website with slightly different CSS code for desktop and mobile. On mobile I use vw units for responsive font-sizes, which is preferred over media queries as mobile screen sizes change every other year and a different approach would require me to update the media queries as well every time.
Now, I think I have found buggy behaviour in Chrome mobile when it comes to font sizes with vw.
I kindly invite you to check out these two pages on mobile, both with Firefox and Chrome:
http://gusto-gelateria.al/
http://gusto-gelateria.al/ice-cream-recipes/
Firefox is correctly showing the font-sizes as i expected, while on Chrome:
font sizes are wrong throughout the page
the font size in the footer on the first page is different than on the second page ( footer fonts are the same on both pages on Firefox, as expected )
Am I missing something here, or Chrome doesn't handle well vw?
If this is not an obvious coding error I did, I may file a bug, but I want a confirmation before doing it.
Take as an example this vw declaration for the footer:
footer address div {
display: block;
font-size: 3vw !important;
}
That declaration appears in both browsers' dev tools as well, so it is being rendered both on Firefox and Chrome, but apparently they interpret it in different ways.
As I said above, my CSS for mobile is different than on desktop, so for inspecting it you should use the mobile device emulation from the browser dev tools (for Chrome see https://developers.google.com/web/tools/chrome-devtools/device-mode/ )
I believe that the root of your problem is that you don't have a viewport meta tag in the head of either of your pages. Without this, the default behaviour of browsers is to scale the page to fit the screen.
Start by adding the viewport tag in the head of all your pages:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
...
</head>
Once you do this you'll see more consistent behavior between browsers, and from one page to another.
More about the viewport meta tag
Hope this helps!
The font-size difference is likely Mobile Chrome font-boosting. Elements with dynamic height get boosted automatically. A solution is to give the element or parent a max-height:
.parent {
max-height: 999999px;
}
But it's probably best to apply that max-height directly to the element containing your text so it doesn't effect anything else you might be doing in your layout.
Test it on a real device, since Chrome's Dev Tools doesn't show the boosting.
I'm Making a website for Desktop+iPad. Site look fine in Desktop browsers including Safari.
but in iPad fonts are big and breaking the layout.
This problem can be solved if i use
body {
-webkit-text-size-adjust:none;
}
But according to this info http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/ this code applies to Desktop Safari. user in Desktop safari cannot adjust the size which is not good for site's accessibility
is there any other alternative to solve this big text problem in iPad.
Use this instead:
-webkit-text-size-adjust:100%;
Also, make sure you are setting the initial zoom setting to 1 in your viewport meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />