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" />
Related
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');
}
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
My page is 980px, it looks perfect in landscape but in portrait it is cut off. so I tried
<meta name="viewport" content="user-scalable=no, initial-scale=0.75, minimum-scale=0.75, maximum-scale=0.75, width=device-width">
It displays the portrait perfect but in landscape it is too small. I have tried to solve this by using js to detect when orientation changes and resetting the viewport properties, doesn't work or works to an extend but with horrible bugs.
I can't use any kind of css media queries because the site is 980 and cannot change.
Is there a way to do what I need? thanks
EDIT
I have tried something like
if (orientation == 0 || orientation == 180) {
viewport.attr("content", "");
viewport.attr("content", "user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=990px");
}
else {
viewport.attr("content", "");
viewport.attr("content", "user-scalable=no, initial-scale=0.77, minimum-scale=0.77, maximum-scale=0.77, width=990px");
}
the detection of when the ipad is rotating works, but the scaling using viewport never works properly
I know you have said you don't want to use css, but assuming thats because you don't want to deal with changing your existing css to work in portrait maybe this could work for you.
#media only screen and (orientation : portrait) {
body {
-webkit-transform: scale(0.75);
}
}
Won't this work? My web pages are responsive but even on fixed-width pages i have issues with iOS displaying the pages goofy on orientation change that i've solved with:
meta tag
<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />
Followed by this JS that i found here: http://www.ternstyle.us/blog/reset-iphone-zoom-on-orientation-change-to-landscape (works on iPad if you add the userAgent check.)
iOSZoom.js (requires jQuery)
var mobile_timer = false;
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
$('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
$(window).bind('gesturestart', function () {
clearTimeout(mobile_timer);
$('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=10.0');
}).bind('touchend', function () {
clearTimeout(mobile_timer);
mobile_timer = setTimeout(function () {
$('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
}, 1000);
});
}
then <script src="iOSZoom.js" type="text/javascript"></script> and good as new :D
I have an AJAX app built for mobile Safari browser that needs to display different types of content.
For some content, I need user-scalable=1 and for other ones, I need user-scalable=0.
Is there a way to modify the value of the content attribute without refreshing the page?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
I realize this is a little old, but, yes it can be done. Some javascript to get you started:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
Just change the parts you need and Mobile Safari will respect the new settings.
Update:
If you don't already have the meta viewport tag in the source, you can append it directly with something like this:
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);
Or if you're using jQuery:
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');
in your <head>
<meta id="viewport"
name="viewport"
content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />
somewhere in your javascript
document.getElementById("viewport").setAttribute("content",
"initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");
... but good luck with tweaking it for your device, fiddling for hours... and i'm still not there!
source
This has been answered for the most part, but I will expand...
Step 1
My goal was to enable zoom at certain times, and disable it at others.
// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');
// ...later...
// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');
Step 2
The viewport tag would update, but pinch zoom was still active!! I had to find a way to get the page to pick up the changes...
It's a hack solution, but toggling the opacity of body did the trick. I'm sure there are other ways to accomplish this, but here's what worked for me.
// after updating viewport tag, force the page to pick up changes
document.body.style.opacity = .9999;
setTimeout(function(){
document.body.style.opacity = 1;
}, 1);
Step 3
My problem was mostly solved at this point, but not quite. I needed to know the current zoom level of the page so I could resize some elements to fit on the page (think of map markers).
// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;
I hope this helps somebody. I spent several hours banging my mouse before finding a solution.
I have an AJAX app built for mobile Safari browser that needs to display different types of content.
For some content, I need user-scalable=1 and for other ones, I need user-scalable=0.
Is there a way to modify the value of the content attribute without refreshing the page?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
I realize this is a little old, but, yes it can be done. Some javascript to get you started:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
Just change the parts you need and Mobile Safari will respect the new settings.
Update:
If you don't already have the meta viewport tag in the source, you can append it directly with something like this:
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);
Or if you're using jQuery:
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');
in your <head>
<meta id="viewport"
name="viewport"
content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />
somewhere in your javascript
document.getElementById("viewport").setAttribute("content",
"initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");
... but good luck with tweaking it for your device, fiddling for hours... and i'm still not there!
source
This has been answered for the most part, but I will expand...
Step 1
My goal was to enable zoom at certain times, and disable it at others.
// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');
// ...later...
// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');
Step 2
The viewport tag would update, but pinch zoom was still active!! I had to find a way to get the page to pick up the changes...
It's a hack solution, but toggling the opacity of body did the trick. I'm sure there are other ways to accomplish this, but here's what worked for me.
// after updating viewport tag, force the page to pick up changes
document.body.style.opacity = .9999;
setTimeout(function(){
document.body.style.opacity = 1;
}, 1);
Step 3
My problem was mostly solved at this point, but not quite. I needed to know the current zoom level of the page so I could resize some elements to fit on the page (think of map markers).
// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;
I hope this helps somebody. I spent several hours banging my mouse before finding a solution.