Did any of you noticed that when using -ms-viewport (with specific width of 320px or device-width) then web browser content can be moved outside available space? It seems like document size is wrong so i can scroll it's content to the left but there is nothing then white empty space. I can also zoom it out(but i should not) and it's size after that is not always the same. I'm aware of http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html but it does not help. It happens after second or third navigate to the same content and disappears for example when device is rotated.
Windows Phone 8 does not properly recognize the meta viewport tag that is standard for webkit and mobile web.
Try this in your CSS
#-ms-viewport{width:device-width}
And then add this JS
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
More here (credit)
try adding the following
#-ms-viewport {
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
Related
As I understand it, the window.innerHeight should return the size of the viewport without the browser chrome (address bar, navigation, tabs, etc.). But this doesn't seem to be the case in the latest version of iOS13. Instead there are two problems:
(Sometimes* too small in portrait) If you rotate from portrait mode to landscape mode with no tabs open and then back to portrait mode, the window.innerHeight value ends up being too small (by about the size of the bottom navigation bar) giving this horrible white bar at the bottom of the screen. See this discussion on macrumors for more details: https://forums.macrumors.com/threads/is-this-a-mobile-safari-bug-white-space-appears-at-bottom-after-rotating-iphone.2209551/
(Sometimes* too big in landscape) If you have a bunch of tabs open, "Show tab bar" turned on and then rotate from portrait mode into landscape mode, then window.innerHeight is too big and the bottom of the screen gets cut off.
Even after turning on every conceivable viewport tag and all permutations thereof, it doesn't seem to work. I've also looked at several "tutorials" on how to handle this problem in iOS Safari, and to date every one that I've checked is broken.
I've also tried all variations of the window.innerHeight, with more or less the same result:
The new visual viewport API returns the same results, no different than window.innerHeight. Bottom is still truncated in landscape with tab bar and portrait mode still has the white bar at the bottom.
document.documentElement.clientHeight with various permutations of CSS (using 100vh, 100%, etc.) gives the same result. Ditto for getBoundingClientRect on various divs and combinations of div elements.
window.outerHeight and screen.height give the size of the full screen without browser chrome, which is generally too big and causes an overflow.
Also tried a bunch of other random things that I've forgotten by now (should have taken notes).
You can manually fudge it on a per-device basis if you can guess the size of the top and bottom browser chrome, but this is extremely fragile. I'm looking for a solution that doesn't involve building a giant look up table of every iOS device and software configuration.
I'm trying to make a fullscreen canvas element for a web game and this issue is blocking my ability to ship. As far as I know this issue is only present in iOS13. After looking around for weeks I still haven't found a good fix.
I have had the same issue recently and I was able to solve it like this:
CSS (only relevant parts shown):
html {
height: 100%;
min-height: 100%;
max-height: 100%;
background: #99f; /* Safari for iOS and Opera for Android in fullscreen mode?!?! */
}
body {
padding: 0;
margin: 0;
color: #000;
width: 100%; /* I was desperate! This was a wild guess... And worked! */
height: 100%;
min-height: 100%;
max-height: 100%;
overflow: hidden;
background: #99f;
}
TypeScript (only relevant parts shown):
// Assume everything here is in the global scope
function detectIOSOrSafari(): boolean {
// https://stackoverflow.com/q/9038625/3569421
if ((navigator.userAgent.indexOf("Chrome") <= 0 && navigator.userAgent.indexOf("Safari") >= 0) ||
(navigator.userAgent.indexOf("Mac") >= 0 && ("ontouchend" in document)))
return true;
switch (navigator.platform) {
case "iPad Simulator":
case "iPhone Simulator":
case "iPod Simulator":
case "iPad":
case "iPhone":
case "iPod":
return true;
}
return false;
}
const isIOSOrSafari = detectIOSOrSafari();
function adjustWindowSize(): void {
let widthCss = window.innerWidth,
heightCss = window.innerHeight;
if (document.documentElement && ("clientWidth" in document.documentElement)) {
widthCss = document.documentElement.clientWidth;
heightCss = document.documentElement.clientHeight;
}
if (isIOSOrSafari) {
let bodyRect: DOMRect = null;
// Another act out of desperation...
if (document.documentElement && ("getBoundingClientRect" in document.documentElement))
bodyRect = document.documentElement.getBoundingClientRect();
else if (("getBoundingClientRect" in document.body))
bodyRect = document.body.getBoundingClientRect();
if (bodyRect) {
widthCss = bodyRect.right - bodyRect.left;
heightCss = bodyRect.bottom - bodyRect.top;
}
}
// Rest of the code, where I use widthCss and heightCss to compute my canvas' size
}
window.onresize = adjustWindowSize;
You can check out the entire source code in the project's repository: https://github.com/carlosrafaelgn/pixel
I am using Angular 1.3 and Bootstrap 3.2. I want to create a single webpage that does exactly this: http://lewisking.net. i.e. I want to be able to have vertically stacked divs that are the height of the viewport. I'm thinking of making a directive that watches the browser height/width and updates the style accordingly.
Any other ideas? Any tips for implementing with a directive?
This is the perfect use case for vh and vw.
Simply set:
.wrapper {
width: 100vw;
height: 100vh;
}
And it will work out the box. If you have to support any old browsers you can easily do a quick JS fall back.
CSS will get you part of the way, but you will need JS to update your 100% height on resize
and scrollTop points etc. And you will also need a way to animate the scroll anyway. This isn't exactly what I would do but it explains the basic idea.
$($window).on('resize', function() {
$scope.winWidth = $(window).width();
$scope.winHeight = $(window).height();
});
...
$scope.getSectionStyle = function(){
return {width:$scope.winWidth, height:$scope.winHeight} ;
}
...
<section id="sectionId" ng-style="getSectionStyle()"
To animate the scroll I just use jQuery like. If you're a angular purist there is $achorScoll but it has no animating at this point so you need to do some extra factory or directive like https://github.com/durated/angular-scroll/
$rootScope.scrollTo = function(_to){
$("html, body").delay(300).animate({scrollTop:_to},{ easing: "easeOutExpo"}, 2000);
}
To get _to you just find the elements offset().top something like :
var offset = $('#sectionId').offset();
$rootScope.scrollTo(offset.top);
We are developing a website for a school project: this website must also be available on mobile devices (and tablets).
We have attained this goal, except for an issue with the font-size: we've set this property manually via #media query.
Does there exist a way by make the font-size can be made dynamic without the use of percent?
Thanks
If I understand your question, you should consider this option:
.yourClass {
font-size: 2.0vw;
}
It meaning 2.0% of viewport width. You can also use 2.0vh (2.0% viewport height)
I'm not sure how others would feel about this solution (since some will view it as unnecessary scripting), but it works really well for me. I use jQuery to set font sizes as a percentage of the screen size.
var FONT_SCALE = 0.027;
function initFontSizes() {
$(".text-element").css("font-size", $(window).height() * FONT_SCALE);
}
If you wanted you could add it as a jQuery function so you can call it on any object:
jQuery.fn.setFontSize(scale) {
$(this).css("font-size", $(window).height() * scale);
}
If you wanted to muddy the waters with a bit of javascript, you could go for something along the lines of:
$(function(){
resizeFont();
$(window).resize(function(){
resizeFont();
});
function resizeFont(){
var windowWidth = $(window).width(),
psize = windowWidth/ 10;
$("p").css("font-size",psize);
}
});
You'd need to a bit of maths to sort it out properly though.
http://jsfiddle.net/wildandjam/5Hnxa/
I'm having some issues with scrollbars on element with position: absolute. The behavior I'm experiencing is that chrome 21 and firefox 15 displays scrollbars inside the box, resizing it's content thus hiding some of the text, however opera 12 and internet explorer 9 displays it also on the inside, but without resizing it's content and resizing the box instead (which is in my opinion correct, since the box doesn't have width defined). Is there any solution to make this look the same in those 4 browsers?
JsFiddle: http://jsfiddle.net/Kukkimonsuta/GaMD7/2/
Edit: as Siva Charan pointed out, it works correctly when overflow-y is set to "scroll" however that shows scrollbar always which is not desired
Edit: my final solution based on answers from Siva Charan and anonymous down voting is lame
http://jsfiddle.net/Kukkimonsuta/GaMD7/15/
function updateAutoScroll(element) {
var $element = $(element);
if (element.scrollHeight > element.clientHeight)
$element.css("overflow-y", "scroll");
else
$element.css("overflow-y", "auto");
}
The only way to do this dynamically across all browsers is with JavaScript, for simplicity I used jQuery.
http://jsfiddle.net/iambriansreed/mYuQx/
$(function(){
// loops through each container
$('.container').each(function(){
if(this.scrollHeight>this.clientHeight)
$(this).children().wrapAll(
'<div style="padding-right:'+scrollbarWidth()+'px;"/>'
);
});
// gets the browsers current scrollbar width
function scrollbarWidth() {
var parent, child, width;
if(width===undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() -
child.height(99).innerWidth();
parent.remove();
}
return width;
};
});
Add overflow-y: scroll; to .container.two
.container.two {
top: 250px;
overflow-y: scroll;
}
Refer LIVE DEMO
UPDATE:
If you are comfortable, you can use text-overflow: ellipsis; and replace to actual space
This is more of a workaround than an actual solution, but it might be good enough. Basically, first wrap the contents of container two in another div, and add some right padding to it. Make sure you also set width: 100% in .item.
Here's a modified version of your demo: little link.
This isn't perfect, but I hope it helped!
ok there are several similar questions but not quite anything that I want.
I have few ajax requests on page and I want to show the image in the center of the screen, and its all working OK.
Just to make it look more prominent, I wanted to place that image on a div with translucent background, so its more obvious for the end users. Now comes the tricky part.
I made the div with css like this:
.divLoadingBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%;
height: 100%;
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
}
This fills the page up alright, or, I should say, this fills the viewport. If I scroll the page down, the page is again normal. I want this div to span the ENTIRE LENGTH of the page, no matter how long the page is.
Here is an example mockup of the problem I made to quickly demonstrate:
As you can see, I took the example of SO for the mockup ;) image 1 shows that its okay when it appears. image 2 shows that it goes up with the page on scroll.
I'm a c# developer and css is as alien to me as ancient latin.
How to make this divLoadingBackground div to fill out the entire length of the page?
Many thanks for any help.
If you need any additional info, please comment!
One thing I dont see in your css is z-index. Fixed, although, fixes this problem, sometimes, based on how other divs are positioned, your divLoadingBackground div could end up in one of the divs.
try adding
z-index: 9999;
or something similar and see if it works.
Would have put this in a comment, but it seems I have too low rep to comment.
Where is the .divLoadingBackground div located in the DOM tree? Since it has fixed position, it shouldn't scroll with the page. This makes me belive that the element is too deeply nested. Try putting it right in the body level of the page and see if that helps.
Also, are you sure that some other css directive isn't changing the position attribute to absolute or something?
Also, make sure to use the right DOCTYPE. That has some impact on fixed position elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Oh, and ofcourse, fixed position isn't supported in IE6 and below.
I believe you will need JavaScript/jQuery to dynamically set the height of the div in question to the height of the page once rendered.
And if you're entering the world of web, it's time to learn that new language "CSS" as well as perpahs-not-quite-as-daunting JavaScript.
When I needed such a functionality some years ago, I examined how Google Calendar did it.
Basically, they use a timer-driven JavaScript file that checks for the height of the window and adjust the height of a contained DIV tag accordingly (or of an IFRAME tag, just any container tag that you like).
Here is a code snippet from a page I worked on:
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.height = "100%";
document.getElementsByTagName("html")[0].style.height = "100%";
document.getElementsByTagName("body")[0].style.minHeight = "100%";
document.getElementsByTagName("html")[0].style.minHeight = "100%";
function height()
{
try
{
height_iframe();
}
catch(err)
{
}
}
window.onload=height;
// --
var ie6WorkaroundIFrameResize = 1;
function height_iframe()
{
var any = false;
var offset = 300;
var c = document.getElementById("iframecontent");
if ( c!=null )
{
c.style.height = (GetClientHeight()-offset)+"px";
any = true;
var d = document.getElementById("iframeie6");
if ( d!=null )
{
d.style.height = (GetClientHeight()-(offset+ie6WorkaroundIFrameResize))+"px";
any = true;
ie6WorkaroundIFrameResize = 0;
}
}
if ( any )
{
setTimeout( 'height_iframe()', 300 );
}
}
function GetClientHeight()
{
return document.documentElement.clientHeight;
}
</script>
Basically, the script regularly checks for the height of the window via the GetClientHeight() function and adjusts the element in concern ("iframecontent") accordingly.
I subtract some offsets of fixed-height headers and footers.
AFAIK you would need to set the size of this divthrough javascript. I would recommend using jQuery, in this way :
//$(document).height() gives the size of the document
//(as opposed to $(window).height() that would give the size of the viewport
$("div#overlay").css('height',$(document).height());