on my mobile view of my webpage i can scroll in vertical and horizontal direction, but this starts always at the top left corner.
Now i want to set the viewport to my custom position with window.scrollTo or something equivalent. window.scroll seem just to work for desktop browser.
any idea how i could solve that?
I got it finally working.
i had to use additionally the setTimeout function
setTimeout(window.scrollTo(x,y),100);
As I said in my comment, this works if your content is large enough. This means larger than the viewport. Without knowing specifics, did you look into setting the viewport meta tag?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Now, if your content div or image or whatever exceeds the size of the viewport width (320 dips on iPhone) you can scroll on the x axis. The same is true for the y axis with different values though.
Related
The site I am working on www.salonbkb.com when in a mobile browser will act responsive but will allow the user to use touch to move the site from left to right creating a whitespace on the remaining space after the drag.
Foundation.zurb.com does not do this nor do most sites I have found. I believe msn.com still does this.
How can I prevent this from happening.
I tried
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
but that didn't do anything.
A page will not do this ordinarily if you have width=device-width, initial-scale=1. Some element is stretching the page, allowing the user to pan sideways. This will often happen if you have margins on a 100% width element, or if box-sizing is not set to border-box and there is padding on the 100% width element. You just need to find the element (chrome devtools is useful for this, keep scrolling down and try to find the one with a big border that sticks out) and modify or remove it.
By the way, I would highly recommend against setting user-scalable=no or maximum-scale=1. It's terrible for usability. Users should be able to zoom in. There are almost no good use cases for this. If you're concerned about tap delay, use fastclick.
You can use javascript to disable the default actions of the browser (like page drag).
document.addEventListener("touchmove",function(event){event.preventDefault();});
BUT, that will stop the user from being able to scroll down also. to prevent only sideways you would have to add conditions that check the touch direction...
document.addEventListener("touchmove",function(event){
if(//check if the absolute value
of last touch.x -current touch.x
is greater than some threshhold){
event.preventDefault();
}
});
I implemented a div in mobile safari that has the same width as the device width and larger height than the device height:
I have used this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
However, I can still scroll the screen. That means if you scroll to the left, some blank space will appear at the right hand side. I have tried the following:
$(document).on(isMobile ? 'touchmove' : 'mousemove', function(e) {
e.preventDefault();
});
This does prevent the scrolling. However, I only want to prevent scrolling on the X direction. Is there a way to do this?
Bit long for a comment. If your viewport settings are correct, it should really be as wide as the screen and scrolling should not be permitted. One possibility is that you have some element that went beyond the size of the viewport. But it's also possible that the device-width on the viewport is wrong. Forexample, for iphone/ipods, the width of the screen on portrait orientation is only 320px as opposed to it's 640px actual-pixel-count. If the device-width somehow gets 640px instead of 320px, your viewport is twice as large.
Try experiment with different viewport widths.
There are several ways to layout web pages so they fit the browser viewport (DOM window). When I say "fit" I include changing the size of the fonts used and changing the width and perhaps heights of DIVs, IMGs, and other rendered elements, as well as allowing "fluid" movements of elements. The goal is to make the page look "nice" on all display devices, from tiny phones to big desktop screens. These layout ways include using CSS em and % sizes, wrapping of text and elements, and JavaScript run by the onload and onresize events. Layout fitting can be made to work almost perfectly, cross-browser, but a sophisticated result may be insensitive to browser zooming, since zooming changes the window width magically, which means without any browser-independent, reliable way to detect the zoom (DOM and CSS standards ignore browser zooming). There is no way to detect the difference between a small window width due to a small device screen versus a small window width due to a large zoom factor. We want to handle these two cases differently, since vision-impaired users need the zoom factor to be honored.
Has anyone succeeded in fitting layout really well (including changing font sizes) in a way that respects zooming? For example, if the user visits the page with a zoom of 200%, initially only the upper left quarter of the page should be shown (the rest being available by scrolling horizontally and vertically), while the same page would fit into the window perfectly for another user having their zoom set to 100%.
Indeed to have a fluid layout you will have to use % to determine the width instead of pixels.
And for fitting the screen use 100%
Just add the following metatag
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=0">
I have a website using the meta tag <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">, Javascript that formats the css for body to screen width and height, and elements inside that have percentage-based widths.
On desktop, this works fine. On my Android phone and tablet's browsers, though, the content isn't scaling properly - everything is just a little too small, and double-tapping to zoom zooms in to the right size (while not displaying the entire page width). This happens both in portrait and landscape mode, and the zoom level appears to be identical, or at least similar.
I have an alert come up telling me what the javascript has formatted body width and height to, and it is always right, but the browser feels the need to load as though the size of the window was actually larger.
I understand there's some nonsense where browsers get confused between CSS pixels and real pixels, but I thought the meta tag there was supposed to fix all of that.
So how do I make the browser load the page to a real 100% screen size, and not some sort of ~125% size?
Add
user-scalable=no
to your viewport meta-tag, this (at least in my tests) forces the browser to display at the width specified instead of the user/browsers preference.
I'm having trouble fitting a site to the iphone's screen dimensions.
What I am doing is the following: I have a slideshow with a few pictures running fullscreen in the back of the page and and little text on top.
When I set up the slideshow I do the following:
$('#bg').css('width', window.innerHeight).css('height', window.innerWidth);
Then I insert the Slideshow and scale and crop the pictures accordingly. This works perfectly fine in all desktop based browsers. Yet, the iPhone does not return its actual screen size but a value of 5000 so I get a rather big slideshow. The rest of the layout seems to render perfectly fine according to the given CSS.
I do know about the viewport "thing" with the iPhone and have already read this: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html which led me to inserting the following meta-tag:
<meta name="viewport" content = "user-scalable=no, initial-scale=1" />
Yet again, this does not make any difference, the iPhone will still return a dimension of 5000px.
Anyone can tell me what I am doing wrong? Thanks a lot!
Ok, so what did the trick for me was using this combination of meta-tags:
<meta name="viewport" content="user-scalable=no, width=device-width" />
Try width=device-width in the meta tag - and make sure you dont have any other elements that are 5000px wide.