I have a website, that is responsive (has a separate media query for mobile). It looks great on portrait orientation, but messed up on landscape, so we wish to disable landscape orientation for mobile devices (Android & iOS at least) before we fix it. I tried to do so with vieport meta tag, but it doesn't do much, except shows me correct zoom and doesn't allow user to scale, but still allows to change orientation.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
How can I achieve such effect?
The only fix I can come up with, is to rotate your body or a wrapper according to window.orientation
$(window).bind("orientationchange", function(){
var orientation = window.orientation;
var new_orientation = (orientation) ? 0 : 180 + orientation;
$('body').css({
"-webkit-transform": "rotate(" + new_orientation + "deg)"
});
});
This is a risky way but thinks its the only way.
Alternative you can bind to the window resize event.
$(window).bind("resize", function()
Related
I have tried a lot of different stuff like:
meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
and #-ms-viewport and all that to make my site scale correctly on ipad mini and iphone
for some reason I can get the meta tag viewport with a scale of 0.65 to work on the mini, but on the iphone it really big.
hopefully someone here can help me make this work!
Here is the site
Firstly it looks like you've mistyped your DOCTYPE declaration, you've put:
<DOCKTYPE html>
It should be:
<!DOCTYPE html>
That aside, if you want the initial scale to change based on screen size you could do something like the following:
var screenWidth = screen.width;
var screenHeight = screen.height;
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.00');
// ipad/ipad mini/tablet screen sizing
if(screenWidth < 1024) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.65');
}
// iphone/smartphone sizing
if(screenWidth < 600) {
viewport.setAttribute('content', 'width=device-width, initial-scale=0.5');
}
This would set the inital scale at 0.65 on ipad sized devices, and 0.5 on iphone sized devices.
I would recommend that you look into responsive design to make the website more usable on tablets/smartphones (it sounds like you're currently just trying to shrink the desktop site, which isn't really a great solution in my opinion)
The above code also only runs on initial page load, if you wanted to run this on browser resize you could utilisie the resize event in JavaScript, e.g.
window.addEventListener('resize', function(event){
// do stuff here
});
You could create a function containing my example code and then run it on page load and page resize.
I have a fixed-width site (980px) where we have been asked to remove the right hand sidebar on smaller devices. (Devices where the screen size is less than 768px, say.)
This means that effectively, we're running two fixed-width sites from the same codebase.
We're using the following meta tag in the site:
<meta name="viewport" content="width=device-width,initial-scale=1">
The problem is that on larger tablets, we're seeing the full site (as we should), but zoomed in. (Because the tablet is considering full width to be - say - 768px and is zooming accordingly.)
I cannot set width to be a fixed size:
<meta name="viewport" content="width=980,initial-scale=1">
...because smaller devices will then zoom out too far.
Is there any workaround that will fix the zoom-level properly for all devices?
(n.b. I am aware that the basic idea is wrong here.)
OK, so I've managed to get this up and running.
Start by setting width=device-width to ensure that the correct "responsive" version loads. Give the metatag an ID so that we can easily grab it later.
<meta id="viewport" name="viewport" content="width=device-width"/>
Then, we want to check the screen size so that we can force the width and zoom to right size:
(function($){
$(function(){
if (window.matchMedia !== undefined) {
var mq = window.matchMedia("(max-width: 767px)");
if (mq.matches) {
$('#viewport').attr('content', 'width=767');
}else{
$('#viewport').attr('content', 'width=980');
}
}
});
})(jQuery);
I noticed that setting initial-scale in any way broke zoom.
Note that I'm using window.matchMedia here, which although not fully supported, is fine for my purposes. If you need to support a greater percentage of users, you might consider using Modernizr.mq instead.
I had a web page that worked perfectly well until Apple came out with iOS 7 today and it broke the layout when screen orientation is changed.
Basically, when I have focus on a text area and rotate the screen to landscape view, the entire page zooms in. If focus is taken out of the text area and turned back to Portrait, things are back normal.
Rotation also works well when the text areas does not have focus.
I already have the following meta-tag in place (to ensure we block zooming):
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0;;">
Any ideas what's causing this awkward behavior?
What do you exactly mean with "broken layout"?
I would like to see a screenshot!
The only thing I saw in my websites, is that the form elements are getting out of the view, as the content lenght is changeing. Im talking about a responsive desing ofc.
Maybe there is a JS to fix this...
Im not preventing the zoom of a website, unless it is a tool that simulates an app
or the customer wants it so. ;)
But im preventing the standard zoom when focusing form elements with jQuery, or JS if jQuery is not in use!
$("input[type=text], textarea, select").focus(function(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;" />');
}).blur(function(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />');
});
I have a webpage optimized for viewing in a mobile.
I am utilizing the viewport meta tag <meta name = "viewport" content = "width = device-width"> which detects the device width and sets the viewport width to that. This means my webpages load properly in a mobile browser rather than looking ridiculously zoomed out.
When I load the page on my mobile (which is a Samsung Galaxy S2) in portrait mode it looks fine, I rotate to landscape and it looks fine, but then if I rotate back to portrait again the page has zoomed in slightly. I either have to zoom out or scroll horizontally.
Why is my mobile browser doing this and how can I stop it happening?
See screenshot for a visual aid to what is happening.
It seems that even though a resizeEvent is firing after orientation change, the device is still failing to reset the zoom after zooming in to fill the wider landscape viewport.
I had to do BOTH of the following to get the display to resize properly after orientation change:
(1) Setting minimum-scale=1.
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0">
(2) In CSS file:
body {
height: 100vh;
height: -webkit-fill-available;
min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
min-height: -webkit-fill-available;
}
This is what you need
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
I'm building a bookmarklet that needs to have it's font sizes independent of the viewport or zoom level of the current page (when the javascript is injected).
What happens now (on tablets + phones mainly) is that the fonts are too small when the page fits the mobile viewport (or really small zoom levels on a PC browser).
Here's a screen grab:
http://i.stack.imgur.com/liO0C.png
Does anyone know a way to do this? Javascript or CSS solutions are great by me.
Thanks!
Sean
Check This -
Preserve HTML font-size when iPhone orientation changes from portrait to landscape
Load mobile CSS if user is on Android
Even you can have Javasacript -
<script>
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
var t= '';
document.write('<link href=http://..../.../your.css media=all rel=stylesheet type=text/css />');
}
</script>
Tutorial Site :
http://css-tricks.com/snippets/javascript/redirect-mobile-devices/
http://www.gethifi.com/blog/three-ways-to-target-mobile-devices