I'm having trouble figuring out why the viewport line from html5bp is causing a problem with colorbox. The problem arises when I view with my iPhone 4. The YouTube video in the popup modal is too big for the screen. On the desktop everything is fine.
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
If I don't use this line, my colorbox modal works great. However my page is not scaled well for mobile.
If I include this line, my colorbox modal is too big for the screen.
Here are example links showing both behaviors:
http://ivantown.com/cbtest/good.html
http://ivantown.com/cbtest/bad.html
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<title>colorbox youtube</title>
<link rel="stylesheet" type="text/css" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});
</script>
</head>
<body>
<h2>colorbox youtube</h2>
<a class="youtube" href="https://www.youtube.com/embed/C0DPdy98e4c?autoplay=1">Link1</a>
</body>
</html>
Thanks for any help. Long time benefactor from the community here but first question.
Your problem lies here
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});
If you pay attention to your code you are specifying the innerWith of the colorbox to 640px. (innerWidth:640, innerHeight:464) iPhone portrait width is 320px. That's why it is running over.
So you have two options: you can set the width and height as a percentage, or using javascript detect if the user is on a desktop or mobile device and set your width and height accordingly.
Related
I have the following page where I added the css:
body{
height:100%;
overflow:hidden;
}
which stops the page from moving up and down on a mobile device. However, when I focus on one of the inputs the page can then move around (up and down). How do I prevent that?
body {
height: 100%;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Login</title>
</head>
<body>
<div class='container'>
<form>
<input type='text'>
</form>
</div>
</body>
</html>
Use this:
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
I noticed, you already have it set. But I had the same problem and it was because my meta tag at first didn’t have it initially and when I did implement it, it was messy. I cleaned it up, as above and now it works.
In my case I didn’t like the x-overflow on mobile.
Credit to this article where it states setting the user-scalable =no. That is the source of your problem.
How to prevent zooming and moving page on mobile browsers?
I'm pretty new to Vue/Vuetify, I've tried using the vuetify v-text-field tag with outline prop.
Why the label is like in the image?
Also the font seems not to be the Vuetify one.
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>test</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Wrap your App.vue in <v-app>. Among other things, it wraps the app in the v-application class which a lot of styles use as part of their selector. From the docs:
The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify’s components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be rendered within your application ONCE.
I am currently working on a node app using express, and rendering html page using ejs.
When I used bootstrap in my .ejsfile, the .col-xs-*, .col-sm-* breakpoints worked well, but the breakpoints for the larger width cannot work as expected.
While I used bootstrap in the .html file and opened it in the browser, all breakpoints worked fine. And I've tried include bootstrap from both CDN and local, it resulted in the same situation. Can't figure what went wrong.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' type='text/css' href='/bootstrap.min.css'>
<title>
TEST
</title>
<style>
.eight{
background-color: red;
}
.four{
background-color: blue;
}
</style>
</head>
<body class='container-fluid'>
<article class='row'>
<div class='col-sm-8 eight'>
8
</div>
<div class='col-sm-4 four'>
4
</div>
</article>
</body>
</html>
I want the red div to occupy three-fourths of the row, the blue one occupy the rest.
Suggestions and solutions to the problem are appreciated.(Not a native English speaker, sorry for the unclear expression if any.)
I am using Safari Version 12.0.2 (13606.3.4.1.4) and I have very simple page like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://d161vkckch5xxj.cloudfront.net/LS/ASSETS/PROD/US/bundle.js"></script>
</head>
<body>
Hello There
</body>
</html>
This shows when I reload the page the asset is loading from the cache which is expected.
Changing the Script tag to a URL which redirects to this asset because there are different variations of this script and based on the context right script will be loaded. So when I change script tag from
<script src="https://d161vkckch5xxj.cloudfront.net/LS/ASSETS/PROD/US/bundle.js"></script>
To this
<script src="https://pvpsx9qpxa.execute-api.us-west-1.amazonaws.com/PROD/getAsset?marketplace=US&assetName=bundle.js"></script>
Which points to the same asset, now when I reload the page every time, the whole asset is getting loaded and it's not hitting the cache at all, Mobile Safari has the exact same issue.
In chrome and FF it works the right way and shows the redirect as well, what to do for Safari as it's a big asset and can't be freshly loaded every time.
Chrome results,
I am running an app with bootstrap 3.3.7 and have an issue with resizing on a scaled screen.
When setting a width of $container-width - 1px, all visible-* and hidden-* get ignored. It works on 100% scaling but with 125% and upwards it fails.
I have the following demo code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrapd/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div>SM=768,MD=992,LG=1200</div>
<span class="visible-xs">XS</span>
<span class="visible-sm">SM</span>
<span class="visible-md">MD</span>
<span class="visible-lg">LG</span>
<hr>
<span class="hidden-xs">XS</span>
<span class="hidden-sm">SM</span>
<span class="hidden-md">MD</span>
<span class="hidden-lg">LG</span>
</body>
</html>
Way to reproduce:
Set the scale to 125%.
Set the window width to 766px (e.g. with key F12) => OK (XS).
Set the width to 767px => bug appears (no display).
Set the width to 768px => OK (SM).
Another way on FHD-Screen:
Set the scale to 125%.
Pin the browser window to a side (half screen)
Environment: Win10, Chrome latest version (bug also appears on Firefox)
How can I fix this?
Just found a solution! Since I'm working with SASS, I added the following to my _variables.scss:
$screen-xs-max: $screen-sm-min - 0.1;
$screen-sm-max: $screen-md-min - 0.1;
$screen-md-max: $screen-lg-min - 0.1;