I have some html code and I load it to WebView. I need to set button width in percents (in order to not to depend on the screen resolution).
When I set button's width in percents I'm getting an error that page cannot be loaded butf I set it in pixels everything is okay.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type='text/css'>
body{ position: relative; }
button { width: 50%; display: block; position: relative; }
</style>
</head>
<body style='text-align:justify;color:white;'>
Some text
<br/>
<button>Boo!</button>
</body>
</html>
Any thoughts?
EDIT:
The solution was found based on #Zak's advice, i.e., by calling the js function after the page was loaded, getting the screen width and setting it to the element.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language='javascript'> function SetWidth(){ d = document.getElementById('but'); d.style.width=screen.width/2; } </script>
<style type='text/css'> body{ position: relative; } button { display: block; position: relative; } </style>
</head>
<body style='text-align:justify;color:white;'>
Text<br/>
<button id='but' >Scary!</button>
<script> window.onload=SetWidth; </script>
</body>
</html>
I have done this with DIVs that I need to be exactly X percent of screen resolution. The way I accomplished this was using JQuery after the page has loaded, because JQuery can detect exact screen width, then you can do the math, and set a width to exactly X pixels.
$(document).ready(function() {
var = myWidth = screen.width;
myWidth = myWidth / 2;
$('#button').width(myWidth);
});
I havent checked that.. But the concept uis sound I assure you
Also: Make sure this code is at the BOTTOM of the page to ensure it is rendered AFTER the page elements have loaded.
Related
Trying to view webpage content on my Android phone. The phone has soft-buttons and so the page content near the bottom of the page is partially obscured by the soft-buttons.
Is there a CSS approach to adjust for the possibility of soft-buttons within the mobile web browser? Or does one set some giant margin-bottom value to the content and hope for the best?
Pic: https://i.imgur.com/9qH4s2W.png
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body
{
margin: 0;
padding: 0;
overflow: hidden;
display:flex;
justify-content: flex-end;
flex-direction: column;
width:100vw;
height:100vh;
}
</style>
</head>
<body>
<div class="content">
<img src="https://picsum.photos/100/100">
</div>
</body>
I'm building a Cordova app for both iOS and Android so naturally there are a lot of different screen sizes.
Some of my views have a full background image. My question is:
Is is better to use one big image that will cover the largest potential device and just use that for all devices, or use a lot of different images assigning each one to the right device using media queries?
Just looking for best practice here.
I recommend using an image that is 2732 x 2048 (largest iPad screen size today) combined with cover, percentage, or viewport background css sizing. For example:
http://play.ionic.io/app/094f73be9047
css
ion-content {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6c/Keeny-creek-wv-autumn-waterfall-scenery_-_West_Virginia_-_ForestWander.jpg);
background-size: cover;
text-align: center;
}
ion-content p {
padding: 20px 0;
color: white;
font-weight: 100;
font-size: xx-large;
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-positive" class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<p>I am so beautiful</p>
<button class="button button-positive">I'm a button</button>
</ion-content>
</ion-pane>
</body>
</html>
Do you have a way to use that image as pattern. Doing that you will not have issues with different screen sizes.
I have a scrollLeft function on a header so it is fixed vertically but scrolls horizontally. There is a bug in chrome for android where the header scrolls horizontally twice as fast as the rest of the page.
If I view this example in chrome for android it works as it should.
jsfiddle demo
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
</script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#header {
height: 40px;
width: 900px;
background-color: red;
position: fixed;
z-index: 2; }
#content {
height: 1000px;
width: 900px;
background-color: blue;
top: 50px;
position: absolute;
z-index: 1; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function(){
$('#header').css('left', 8 - $(this).scrollLeft());
});
});//]]>
</script>
</head>
<body>
<div id="header">This is a fixed header that scrolls horizontally</div>
<div id="content">This is blah blah blah blah</div>
</body>
</html>
When I implement the code on a basic page as this page, the bug appears.
simple jsfiddle page
Somehow jsfiddle gets around the bug.
Changing
$('#header').css('left', 8 - $(this).scrollLeft());
to
$('#header').css('margin-left', 8 - $(this).scrollLeft());
and setting the fixed element to left:auto !important;
has resolved the issue!!!
Check out the following demo on an Android device:
Scrolling Demo
There is a red box that is slightly off screen. When the vertical spacer is not present, you can't drag the page around in any direction. When the spacer is present and taking up more vertical space than the window, you can drag the page down (as expected) however, now you can also drag horizontally.
This only seems to happen on Android browsers. Any clues on what's going on here? I'd like to prevent the horizontal scrolling altogether while retaining vertical scrolling.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" id="viewportMobile" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="test.css" />
<style>
html,body {
overflow: hidden;
}
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: visible;
overflow-x: hidden;
}
.offscreen {
position: absolute;
right: -20px;
background-color: #ed0021;
padding: 20px 20px 20px 20px;
}
</style>
<script>
var showSpacer=true;
function toggleSpacer() {
showSpacer = !showSpacer;
var spacer = document.getElementById('spacer');
spacer.style.display = showSpacer ? 'block' : 'none';
}
</script>
</head>
<body>
<div class="toggle-button" onClick="toggleSpacer()">Toggle Spacer</div>
<div class="offscreen"></div>
<div id="spacer" style="width:50px; height:2000px; background-color:#444">
</div>
</body>
</html>
Removing the overflow properties and changing the position to relative for the body element worked for me. It should look like this:
body {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
edit: bad copy/paste
edit 2: updated answer
I use the below html.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes"/>
<title>Sample</title>
</head>
<body>
<div style="width: 250px; height: 50px; background: green;">250px</div>
<div style="width: 500px; height: 50px; background: yellow;">500px</div>
<div style="width: 1000px; height: 50px; background: red;">1000px</div>
</body>
</html>
I set UseWideViewPort to true
WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
From what I understand, the div with the 1000px should occupy the entire width, the one with 500px should scale to half the width and the one with 250px should occupy one-fourth the width.
But what really happens is the one with 500px and 1000px goes beyond the screen size. I have attached the screenshot for clarity. I also tried changing user-scalable=no with no effect.
How should I fix this?
What is happening is that since you have the
<meta name="viewport" content="width=device-width, user-scalable=yes"/>
and you specify the width in your divs, then an actual value of, say, 1000 pixels is being applied to the div. According to documentation:
When the value is true and the page contains the viewport meta tag, the value of the width specified in the tag is used.
If you want to achieve divs with widths in respect to one another, an easier ruote would be using percentages, something like:
<body>
<div style="width: 25%; height: 50px; background: green;">25%</div>
<div style="width: 50%; height: 50px; background: yellow;">50%</div>
<div style="width: 100%; height: 50px; background: red;">100%</div>
</body>
If you aim to have a 'wide' viewport, like a desktop, you should pass true and not specify a meta tag as mentioned:
If the page does not contain the tag or does not provide a width, then a wide viewport will be used.