I have SVG with width set to 2048px and I want it display in Opera Mobile (with possibility to scroll horizontally if it is bigger than screen), but for some reason Opera is always displaying the SVG with width = 800px and scaling down the SVG. This happens only on a real device (Samsung Galaxy Tab 8.9 - resolution 1280x800). This happen also in horizontal mode - in which screen width is equal to 1280px so the SVG is even SMALLER than a screen. On the other hand on the Opera Mobile emulator it has the width set to 1280px (still no scroll but it's better).
I also tried to place SVG in div with some fixed sizes but without success - the size of div is correct but SVG is scaled down...
Are there any way to render a page with horizontal scrollbar? Or workaround the bug which causes the SVG in horizontal mode set to the width of shorter dimension?
You can check the example here: http://www.pax.ndl.pl/test/svg_temp.xhtml
Related
I have a fixed container of 100vh x 100vw that contains 6 absolutely positioned divs that are 100vh x 100vw.
I use a dummy element that is positioned relative w/ 6 divs that are 100vh to trigger each scene.
When I resize the window, the scene's animation moves forward and backward in time. Is there a way to prevent that from happening?
The issue is that when you resize the window, the position of the scroll bar remains fixed at an absolute number of pixels. However, because your content is based on view height, the height of the document changes dynamically as you resize the window. Thus, the window scroll position as a percentage of the document body height is also changing, and this is what ScrollMagic bases progress on.
To illustrate with simplified math:
A) Given a window height of 1000px, your document height will be 6vh * 1000px = 6000px tall. If your window scroll position is 1200px, you'll be 20% of the way through the overall ScrollMagic timeline.
B) If you resize the browser to 800px tall, that changes the document height to 6hv * 800px = 4800px tall. However the window scroll position will remain at 1200px, which is now 25% of the way through the ScrollMagic timeline.
The simplest solution is probably to keep your document a fixed height.
I need to have colorbox window with static width (it is actualy dynamic - depends on css specified width or image actual width etc...) except mobile version. I'm doing responsive website. When I resize browser window it always have fixed width, but when I'm on mobile the colorbox window is wider than broser window - it doesn't resize to fit the browser window screen. I apply this:
$(window).on('resize', function(){
$.colorbox.resize({width: '100%'});
});
This help, but if I return to non mobile device or when I resize browser window it stays at 100%. But at this point I want to return colorbox window to have static width as previous. Keep in mind that previous width is based on content width (image width) or css specified width.
Any idea how to do this?
Thanks
Why do you only want the colorbox to be 100% width when user resize the window? Notice what you did in your JS is not detecting whether user is on a mobile device.
It seems like you should use media queries instead. Read more here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I am working with Bootstrap, and Flat UI. I am trying to have a header area span full width and the rest of the website fit inside a container thats 940px. The header area looks good in all non-mobile browsers, but when I view it using Safari and Chrome in iOS6 the header is not spanning full width. Can anyone help?
You can view the site here
The problem is that you have a fixed width of 940 pixels on content area of your website and your top banner is set to only take up 100% of the viewport. On a cellphone, 100% of the viewport is less than 940 pixels so you can scroll horizontally to see the rest of the content, but the top banner doesn't stretch further than the original 100% of the viewport.
Instead you may want to try to make your content area more responsive using media queries so that it is more narrow on smaller screens, or you could just give your content area a width of 100%, or you could give your banner a min-width of 940px.
I have an image in WPF which I would like to enlarge to a fixed width (say 800px).
The image should stretch to this width using the original aspect ratio (so not as to distort) and the height should be scaled as necessary.
If the height is not too large for the container the top of the image should show at the top of the container. The image should then slide upwards until the bottom of the image reaches the bottom of the container via an animation (so at some point the whole image has been displayed).
Links or suggestions highly appreciated
I've been trying numerous viewport combinations, but can't seem to find the right one.
I have a mobile site that is built to be 320 pixels wide. I'd like these 320 pixels to stretch the full width of the screen in both portrait and landscape mode, regardless of which orientation the screen starts out with, or whether the viewer rotates the device.
Thanks
What is the point of using fixed pixel values when you want the site to stretch?
Just use
width: 100%