Why doesn't 100% width/height work on iPhone? - javascript

If you have the chance to enter to http://toniweb.us/gm in your phone you will see that the dimensions are...wrong.
Acording to the css:
html, body{
position:relative;
height:100%;
width:100%;
overflow-y:hidden;
}
It should be using the whole of it.
And, I added:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=2.0" />
But I am not so sure what this affects.
In addition, the website is optimized to >= 1024 pixels. Is there a way to adapt iPhone to this? Perhaps by scaling somehow?
Any hint would be very helpful.

Tried:
html, body{
position:absolute;
top: 0;
left: 0;
right: 0;
overflow-y: hidden;
}
I guess that above code will do the job ;)
And I think your goal was to see only the grey sidebar on the iphone right?

Related

Trying to create a 100% height div in a Wordpress site with Divi theme

I have a Wordpress site, that shows maps of fictional worlds. The maps are leaflet.js maps, that are displayed within a div called map. This div is not created with the divi frontend, but in a html file that gets included through a plugin shortcode. Basically the php plugin loads a bunch of map specific settings to provide to the leaflet map and shows some html.
Now I want this map div to be as high as possible without causing a scrollbar.
I've tried different things:
height: 100% - does not show anything at all, apperantly an issue with the parent elements
height: 100vh - way bigger than the screen and triggers a scrollbar
height: 74vh - fits on my 2.5k screen but not on others
setting height according to window.innerHeight is too large
setting height according to window.innerHeight and substracting the pixel count of the header and footer is too large too
Whatever I try, I either get a scrollbar or a white stripe below my blue footer. You can see it live here: https://fictionalmaps.com/audience-map/?creator=1&map=KisandraShowCase
My latest - not working - iteration of the code I include with php looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8" />
<!-- meta name="viewport" content="width=device-width, initial-scale=1.0" -->
<!-- some css files are loaded here needed for the leaflet map itself - none should interfere with the map div -->
<style>
html, body {
padding: 0;
margin: 0;
}
#map {
width: 100%;
max-width: 1024px;
height: 70vh;
max-height: 1024px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var tempHeight = window.innerHeight;
jQuery('#map').height(tempHeight);
</script>
<!-- some js files are loaded here needed for the leaflet map itself -->
</body>
</html>
This produces a scrollbar. If I try e.g. var tempHeight = window.innerHeight - 340; I can get it to fit nearly, but get a white stripe below the footer. Also it's not consistent across computers.
My CSS game is weak, I need some help! I'm stuck in an unsuccessful trial-and-error loop and running out of ideas what else to try.
Use position absolute and give it a top: 0; and bottom: 0; that way iot will use the entire screen height.
#fullscreen {
background-color: blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="fullscreen"></div>
</body>

Make Chrome and Firefox display a viewport

I may just be missing something but neither this meta tag:
<meta id="gameViewport" name="viewport" content="width:device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui, target-densityDpi=device-dpi">
nor these css3 directives:
#-webkit-viewport {
height: 704px;
width: 1280px;
}
#-viewport {
height: 704px;
width: 1280px;
}
#viewport {
height: 704px;
width: 1280px;
}
seem to be making any difference at all, chrome and ff don't responsively change the viewport. Is there another way I should be doing this? For ie I was able to use the very simple:
#-ms-viewport {
height: 704px;
width: 1280px;
}
css3 directive to get what I wanted but apparently that is not supported on other browsers? Am I doing something wrong with what I have or is there a better way to achieve the same thing in ie in other browsers? The site I'm working on is hosted here: damiankulp.com/damian/gallery/protobox
Not sure, but content="width=device-width, ..." instead of content="width:device-width, ..." may help.

Hiding the toolbars in iOS 7 using overlay hack

I've been reading around Stack Overflow and searching on Google for a reliable way to hide the toolbars on iOS 7 as the old scroll trick no longer works.
Based on this: http://mihhaillapushkin.wordpress.com/2014/01/20/stop-navigation-bars-from-appearing-in-iphone-ios7-safari/
I've tried the following:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style type="text/css">
*
{
padding: 0;
border: 0;
outline: 0;
margin: 0;
}
html,
body
{
width: 100%;
height: 100%;
overflow: hidden;
}
div.content
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 320px;
height: 480px;
background: orange;
}
#scroller {
height: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
}
</style>
</head>
<body class="default">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
setInterval(function(){
if((window.orientation == 90 || window.orientation == -90) && window.innerHeight != window.outerHeight) {
$('#scroller').show();
} else {
$('#scroller').hide();
}
}, 1000);
</script>
<div class="content">
<div id="scroller" style="z-index: 100000;position: fixed;top:0;left:0;right:0;bottom:0;">
Scroll up!
</div>
</div>
</body>
</html>
But scrolling up never actually hides the scrollbars. The #scroller is hiding and showing if the toolbars are visible or not, so half of it works, but just not the hiding unless I bounce the content into the toolbar, but if I scroll then the toolbars appear again.
Have I misunderstood the implementation?
If you want to hide the Safari Address bar you need to add this meta tags
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
The status bar can be hidden in iOS 7.1 and above with this meta tag
<meta name="viewport" content="minimal-ui”>
Okay, here is an answer from the author.
I have not dived into your code block, but just to clarify what I've told about in that post.
Firstly, I have shown an example of a game that has adopted an overlay that forces the player to scroll up until the bars go away. After the game detects that bars are no longer visible it locks scrolling until the player triggers navigation bars again, forcing him to go through the loop again.
Secondly, I have revealed a trick that for some reason deactivates navigation bar triggering ONLY for the top part of the screen. The bottom still triggers them as usual, so the the overlay I mentioned earlier is still needed. Thus this is a half-solution for the problem, but it is still better than nothing.
IMHO, the combination of those 2 approaches yields a good-enough solution for games and other applications that need full-screen without the need for scrolling.

Override jQuery Mobile Background CSS

I am trying to override the typical jQuery Mobile background with a .jpg. I cannot, for the life of me, figure this out. It is driving me nuts! I have been all over SO and Google to no avail with anyone's answers.
My current header information
<head>
<title>Veolia Water Splash Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<link rel="stylesheet" href="./css/stylo.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="./js/main.js"></script>
</head>
The process my application is following:
index.html loads as a picture fades in. (This CSS override works perfect)
After the image has faded in, I do a $.mobile.changePage() to another page, not a multipage format
This is where it fails, the background loads up, but then gets overridden by something. I just cannot seem to figure out what is overriding it.
This is my CSS
#logo
{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 80%;
}
body
{
background: url('../img/background.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
.ui-page .ui-body-c .ui-page-active .ui-overlay-c .ui-mobile-viewport
{
background: transparent !important;
}
Anyone have some pointers or know what I am doing wrong? The background flashes for a split second, but then gets tossed out...
Thanks in advance for any help!
First, you need commas between the CSS classes you are setting to transparent. Next, as ui-overlay-c is also applied to the body, you can set its background image along with the body's.
So together, set the transparency first, then the body background:
.ui-page, .ui-body-c, .ui-page-active, .ui-overlay-c, .ui-mobile-viewport
{
background: transparent !important;
}
body, .ui-overlay-c
{
background: url('http://www.hdwallpapers.in/wallpapers/digital_layers-1440x900.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
Here is a working fiddle of the above: http://jsfiddle.net/ezanker/5GgR9/

What is the effect of the following CSS in a phonegap app?

What is the effect of including the following CSS? Initially this may seem like a silly question, but bear with me. I have the following page. Nothing too complicated, just a fixed header at the top with the h1 centered horizontally inside the header div. In a browser this works perfectly. However, this is to be used inside a phonegap 2.9.0 app.
On a nexus 4, when the screen rotates, the h1 is no longer centered horizontally unless the "orientations from js" css is included. But I don't even have the class in the #media selector in my HTML page at all. Admittedly I copied the orientation css from jquery mobile's css file, but only to understand how they were able to get their h1 to always center even upon device orientation change. I am not using jquery mobile.
Can someone please explain this mystery?
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<style>
/*CSS WITH THE CORRECTING EFFECT*/
#media screen and (orientation: portrait){
.nonExistantClass {}
}
/* OR THIS ONE! */
#media screen and (orientation: landscape){
.anotherNonExistantClass {}
}
/*END CSS WITH THE CORRECTING EFFECT*/
.header h1{
font-size:1.4em;
margin: 0 30%;
}
.header {
left: 0;
right: 0;
width: 100%;
top:0;
position: fixed;
z-index: 1000;
background:black;
color:white;
height:2.4em;
line-height:2.4em;
text-align:center;
}
</style>
</head>
<body>
<div>
<div class="header">
<h1>Title</h1>
</div>
</div>
</body>
</html>
UPDATE:
I have narrowed it down a bit. My initial question was about classes ui-mobile and ui-page. However the same CSS from before with changed class names has the exact same effect.
Further, I only need one of the two #media selectors to exhibit the mentioned behaviour. I have updated my question.
My answer, unless someone can correct me, is that this is simply a bug in phonegap or its implementation on Android, and that by including one of those media selectors I am forcing the browser view of the app to somehow do a width calculation that it is supposed to be doing in any case.
I wonder if the people behind jQuery knew this or just coincidentally happened to have CSS that corrected the bug...

Categories