I would like to create an HTML/CSS/Javascript page that can show a picture (an ads) in full screen for mobiles. Smartphones + tablets. The ads stretch to the maximum width and height and there is no scrollbar.
I try two diferent ways :
var screenWidth = $(window).width();
var screenHeight = $(window).height();
$('body, .ads-picture').css('width', screenWidth+'px');
$('body, .ads-picture').css('height', screenHeight+'px');
And in other way with media queries for each devices.
But it doesn't work in any situation. In iPhone 5 the picture is not in full screen (I need to scroll), in iPad mini also.
Can you help me please ? Thanks !!!
add the following tag and put width: 100% im the images
<meta name="viewport" content="width=device-width, user-scalable=no">
get more info about it here
Related
I've been trying to build a responsive button on our new website which changes the body width to 460px for example to show what our website looks like on mobile. I've seen this done using iframes as the iframe width sets the viewport width so a button can set a width of the iframe and it will change and look responsive.
I'm trying to do this with vanilla javascript but struggling. I can set the body width no problem, but bootstrap and the css media queries don't respect setting a width as it works off of viewport/screen width which remains the same.
How do I do this? I have a button of a mobile, and a button of a desktop and they should adjust the screens width to mobile/desktop widths and the media queries should respect it.
Is this possible? My viewport is set as:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
and media queries as:
#media screen and (min-width: 992px) {}
If I don't get you wrong about your case, I have 2 recommend for you.
Use function open to open the new window that is fully loaded in desired width and height. You can take a look at here
var option_string = "location=yes,width=640,scrollbars=yes,status=yes";
var URL = "https://your_link.com";
var win = window.open(URL, "_blank", option_string );
Instead of loading your full page, use iframe of page which you want to display and embed, after click Desktop or Mobile button, change the width of iframe depend on which button is clicked. Take a look at example below for more details:
<body>
<iframe id="your_site" src="https://your_link.com">
<button class="btn btn_desktop">Desktop</button>
<button class="btn btn_mobile">Mobile</button>
<script>
var $iframe = document.getElementById('your_site');
var $resize_button = document.getElementByClass('btn');
$resize_button.on('click', function(e){
var $button = e.target;
if (button.classList.contains('btn_desktop')) { // bigger your frame
$iframe.style.width = '640px';
} else {
$iframe.style.width = 'auto';
}
})
</script>
</body>
Hope it would help
I have a code below that tries to determine whether someone is accessing my site from a mobile or desktop, by the innerWidth of their device. However, when I tried to get the innerWidth from my mobile, it shows that the width of my mobile is 980px? There's no way the width of my mobile is anywhere near that wide though. The width of my mobile is around: 300px, and the height is around 500px. On, my desktop though, it shows 1280px, which is correct. My questions is, why is it showing the wrong width for my mobile? Unless there's something I'm not understanding correctly?
<?php
include("ajaxLink.php");
?>
<script>
$(function(){
var width = window.innerWidth;
alert(width);
if (width > 500) {
alert("going to index");
window.location = "/";
} //end of if (width > 500)
else {
alert("going to mobile");
window.location = "mobile.php";
} //end of else (width <= 500)
});
</script>
window.innerWidth represents viewport pixels on most mobile devices and not physical pixels. You should be able to get around this through clever use of doctype declaration (such as.. actually declaring a doctype) as well as including a meta viewport tag in a head section. Here's a quote from this article that goes into detail about your specific question:
But when the viewport has not been constrained, and an HTML5 doctype (or none at all) is used, innerWidth will suddenly start to represent values much larger than the physical screen: and represent the width of the viewport canvas upon which the page has been rendered.
On a portrait iPhone, for example, the default viewport is 980 pixels. On a landscape iPhone it is, well, according to window.innerWidth, 981 (yes, really).
I would try this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
According to quirksmode, window.outerWidth also jumps from being actual pixels to viewport pixels when zooming.
I am creating a webpage on mobile, which will fit 100% width of the screen.
However, when I created some elements with JavaScript and set the width to window.innerWidth, they would be much wider than the static elements that set width: 100% in CSS. (on iPhone 6(s))
The width: 100% sets these elements to 375px, which I think is right, since the screen resolution is 1334 x 750. However the window.innerWidth is 488px, for whatever reason I really don't understand.
Is this a bug of the browser I am testing, or I miss something for retina screen?
By the way, I use width:480px;max-width:100% to set the static elements. The view-port meta is like <meta name="viewport" content="width=device-width, initial-scale=1.0">
Pixel ratio and sidebars can cause the innerwidth of window to be different depending on the device. If you need to check window width in javascript so your media queries match up. Use the window.matchmedia function.
JS
if ( window.matchMedia('max-width:800').matches ){
console.log('tablet mode');
}
Using css
#media only screen and (max-width: 585px) {}
to arrange a mobile layout. BX Slider is resizing, but in mobile mode, the slider breaks the width somehow (though, not visually) and scales the viewport.
Not sure how I could restrict this issue either. My ideal viewport width is 585px, but that doesn't seem to fix it.
<meta name="viewport" content="width=584px">
I think what you are trying to achieve can be done with meta tags.
Prevent scaling:
<meta name="viewport" content = "width = device-width, initial-scale = 2.3, user-scalable = no" />
Is there a way to center a element on the viewport of a mobile browser?
This means that when users pinch to zoom, they should still see the element ( let's say a div styled as a window ) on the center of their viewport.
I can't find a straight way with HTML\CSS.
You can use JavaScript to detect page zooming and then calculate absolute sizes relative to original sizes and zoom factor.
Take a look at this:
How to detect page zoom level in all modern browsers?
There is a very good and universal way.
You can try to position the div fixed, and centering it with a combination of margin and top / left:
.center {
position:fixed;
z-index:999;
width:200px;
height:200px;
background:#4679BD;
top:50%;
margin-left:-100px;
margin-top:-100px;
left:50%;
}
JSFiddle: http://jsfiddle.net/HGtQA/
It turns out that pinching to zoom triggers a window scroll event in ios browsers on my ipad mini, and on my android 4.something device.
$(window).on("resize scroll", function () {
clearTimeout(pinchToZoomCheckTimer);
pinchToZoomCheckTimer = setTimeout( function () {
var width = window.innerWidth || document.documentElement.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight;
dlgInner.width(width);
dlgInner.height(height);
dlgInner.css("top",window.pageYOffset+"px");
dlgInner.css("left",window.pageXOffset+"px");
}, 50);
});
This centers a div on the exact location used by the viewport. Since it is transparent, it "kinda" takes up the whole viewport. I've read that some browser report a few more pixels for the window.innerWidth, but I can live with a ~20px displacement.
http://jsfiddle.net/agilius/yFajk/show works while pinching to zoom, and scrolling after being zoomed in on my ipad mini and android nexus.
What do you mean by "they should still see the element" ? If a user zoom he will see only a part of an image. But if you want you can disable zoom with this meta :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />