I have a mobile web application which has the following view-port.
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
In one of the pages of our mobile web app, we are embedding another website using an iframe. This web application is not responsive and doesn't have a viewport meta tag in the head.
We wanted the embedded site's view to be without any initial-scale, but unfortunately, it is having an initial scale (may be 1.0) which attached to it. Looks like it's inheriting from the parent frame. Browser is not letting me to zoom out the iframe content. Both the parent and embedded webpage is in the same domain as well.
Below is the generated code from the browser.
<!DOCTYPE html>
<head>
<base href="/">
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>title</title>
</head>
<body>
<!-- some content -->
<div>
<div class="iframe-wrapper">
<iframe frameborder="0" src="url ot the site>
#document
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0">
..
</head>
<body>
...
</body>
</html>
</iframe>
</div>
</div>
</body>
</html>
Would it be possible to have a different viewport for the iframe rather than reusing the one from the parent?
Related
i trying to build this layout with tailwind css but i can't figure out
layout i want to create
my layout
<!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="stylesheet" href="/dist/output.css" />
<title>Document</title>
</head>
<body
class="font-Rubik grid grid-cols-[80px_minmax(400px,_1fr)_250px] grid-rows-2 h-screen"
>
<nav class="bg-slate-800 row-span-2">nav</nav>
<menu class="bg bg-violet-700 col-span-2 text-white">Menu</menu>
<section class="bg-slate-300">Inbox</section>
<main class="bg-slate-300">Email view</main>
<aside class="bg-slate-300">Additional info</aside>
</body>
</html>
To achieve this, you can mix the grid and flex systems. For the grid you can adjust the individual column widths in the config. i have taken 25/50/25.
https://play.tailwindcss.com/WqVvubeWsT
yo can do it this way to
grid-cols-[80px_400px_1fr_250px]
just need add (_) between ich size
I have read a post, link here: Render-tree Construction, Layout, and Paint
A demo page:
<!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" />
<title>No JS</title>
<link rel="stylesheet" href="http://127.0.0.1:3000/static/css/style.css" />
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
The Performance Panel:
Enlarge the red part:
As you see, there is no step of Render-tree Construction.
Why? Does the post wrong or the Render-tree Construction part is in Recalculate Style?
I want my borders to be on top for mobile like devices and on the left for others.
It's working on mobile but for others it's adding the properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Home</title>
</head>
<body>
<img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-l-lg">
</body>
</html>
Since you are adding rounded-t-lg without a prefix, it takes effect on all screen sizes.
To hide the top border on screens at the sm breakpoint you will have to add sm:rounded-t-none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Home</title>
</head>
<body>
<img src="https://picsum.photos/800/400" alt="login image" class="rounded-t-lg sm:rounded-t-none sm:rounded-l-lg">
</body>
</html>
i create one site in angular 7.i implement adminLTE theme but issue is login and register page have use different css and dashboard use different css.
so how can i put different css for both so there is no conflict.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Angular AdminLTE</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body hold-transition>
<app-root>Loading ...</app-root>
</body>
</html>
and also body have different class for login,register and dashboard so how can i also use related class to its component
Please anyone can help me to out this.
Using the HTML5BoilerPlate template from Paul Irish and gang (although, I'm not saying that has anything to do with it) and I have some styles inside tags that are rendering on page. If I move them inside the they work as they're supposed to work. I've done this before to do some quick editing and have never seen the styles rendered on the page. Here's a sampling of the head code:
<!doctype html public "*">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width">
<title>Title</title>
<meta name="bitly-verification" content="xxxxxxxxxxxx" />
<meta name="google-site-verification" content="xxxxxxxxxxxxx" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" media="all" href="css.css" />
</head>
<body>
<div id="container">
<style>
...
</style>
</div>
</body>
However, we've found that taking out the container div allows the style tags to work and they no longer show up in the rendered page. What we haven't figured out is why and that's bothersome. Has anyone ever had this issue? Or can anyone give insight as to why this might happen?
Not a deal breaker just more a matter of knowledge. Thanks.
**EDIT: #selector > * was the culprit - aargh! *
W3Schools state that:
The style element always goes inside the head section. - Reference
It makes sense that putting the style tag in the body (for whatever reason you might be doing that) would come with some undefined behaviours.