I have a web app which can display images at various sizes. One selection is to scale up to the size of the screen (and then scroll to it so that nothing else is visible). When I do that, the browser automatically zooms out to fit the entire image plus the rest of the page. How do I prevent that automatic scaling, while still allowing the user to zoom in and out?
Related
I'm developing a very small image manipulation webapp and it currently is working well.
There is one issue where if the image loaded into the canvas is very large (larger than the desktop screen resolution), it is desired to zoom out of the page such that manipulating the image in the canvas is more tractable.
That works fine for the image, but the issue is that the rest of the application is zoomed as well (such as the palette, toolbar, etc.)
Is it possible to have page zoom only affect the canvas element and none of the other elements?
Otherwise, is it possible to modify built-in browser page zoom to accomplish this sort of functionality?
I can't find anything, anywhere for this one.
I have an icon for a button, and the URI to that icon is in the CSS. When the browser is on the laptop screen it calls the correct URL for the icon, but when the browser is on a second screen connected to the laptop it makes a call to a different URL and gets a 404, and the icon disappears. I can drag the browser from one screen to the other and the icon will dynamically show up and disappear, depending on what screen the browser is on. It does this on multiple machines, including Windows and Mac. What could be causing this?
Make sure you're not using a media-query with another URL depending on the screen size.
maybe you have pixel density difference between those monitors, this could cause the stylesheet to bring another image, usually a #2x image to fill the extra pixels that "retina" monitors can have.
maybe you have a rule on your responsive css matching the max-width or min-width of the page.
It's really hard to know, can you provide a link for the website?
I've a problem in my application. Native browser zoom in mobile devices don't fit my needs...
I've 3 main parts in my mobile web page.
Header
Main content area (there will be scroll inside this if content will increase)
Footer
If i use native zoom of mobile browsers then my whole page gets zoomed..
but i don't wants zoom effect in header and footer..
What i wants is to implement native browser zoom effect only in content area..
So please give me some guideline how it is possible to achieve this without any errors or cross browser issues?
Mobile Safari is not rendering images on our HTML5 website. These images are added dynamically via JavaScript.
We have tried the suggestions from these places, but none work for us:
How can I force WebKit to redraw/repaint to propagate style changes?
Webkit box-shadow gitches on top of the other elements
http://mrdarcymurphy.tumblr.com/post/5574489334/force-mobile-safari-to-repaint-redraw
The only things that cause the images to get rendered are if we either ask the user to turn the device orientation to landscape, or if we show a JavaScript alert. Once the user dismisses the alert modal, the images get rendered.
Steps:
1) Visit Tekiki.com on your iPhone. Make sure Wi-Fi is disabled (happens less consistently with Wi-Fi).
2) Tap on one of the apps. Images (app screenshots) on the bottom of the page will only appear if you turn the device sideways.
What else can we do to force WebKit to repaint/paint these images?
I have a web app that I want to exactly vertically fill the browser viewport, including pushing the address bar up past the top.
Is there some way of getting the browser viewport size without the address bar? Currently, I am using jQuery like:
$("#mainBox").height($(window).height)
but this will fill the viewport minus the address bar, causing the element to be too narrow when viewed in landscape.
For iPhone, I was getting around this by hard-coding the iPhone browser viewport sizes into the page, but there are obvious problems with that.
You need to reset the height in an oerintationchange event. So is you create an orientationchange event handler for the window you need to call the same line inside that handler and you will get the new window height and you should be good.