I have used view port in my iPad app. Here it is:
meta name="viewport" content="width=device-width, initial-scale=1; maximum-scale=1.0; user-scalable=0;
And, I have written a code to draw lines on HTML5 canvas.
I am creating canvas as:
var mycanvas = document.getElementById('canvasId');
var context = canavas.getContext('2d');
..
It is working fine if canvas is created in portrait mode and lines are drawn in portrait mode too. But if we change the orientation, there is some gap between the mouse moved and line drawn on canvas. When i removed the viewport line from my html code, it is working fine but without using viewport everything looks bad. Everywhere it was suggested to use viewport in app.
Any way around.
Any help would be appreciated.
Thanks
Related
So I had the problem on mobile described in the following question: Mobile scroll offscreen :
When an object would go offscreen, it seems to increase the total width/height of the website, so the object stays on the screen. I implemented an animation where an css objects leaves the screen and then reenters from the other side.
Following the answer to the mentioned question, I added <meta name="viewport" content="user-scalable=no"> to my HTML file.
That problem is solved, but now it will ignore the ccs code
text-size.adjust: auto;
text-size-adjust: 60%;
, so my layout is now messed up on mobile (before adding the HTML it worked perfectly fine).
Is there any way to prevent the offscreen behavior without blocking the text-size.adjust ability? Hiding the part that is offscreen would help to.
I use Google Chrome (Version 94.0.4606.85) on an Android (Version T810XXU2DRH1/T310DBT2DRH2) Tablet (Samsumb Tab S2 SM-T810)
I'm happy about every helpful answer
Looking into the viewpoint deeper on this website I found out that <meta name="viewport" content="width=device-width, initial-scale=1.0"> will set the width of the viewpoint to the device width (so no offscreen viewpoint, I assume that's possible with height too, but I didn't try) and set the zoom level to 100% when the website is loaded.
We have a website that uses "map" and "area" tags. It is generated by saving an Excel spreadsheet to "htm" format, and it is mostly viewed in Safari on iPhones. These tags enable users to click a portion of one page and have it take them to another page.
Recently there seems to have been a change/update that causes Safari to zoom if the clickable area is touched.
Code example:
<map name="MicrosoftOfficeMap3">
<area shape="Rect" coords="0, 0, 150, 117" href="sheet004.htm#Range!A1">
</map>
If you touch the area quickly, it will follow the link. However if your finger stays on the area for a few milliseconds, it will cause the page to zoom awkwardly.
Has anyone experienced this and have you found a way to disable to the zooming? I have tried many things with the viewport and "body" zoom settings in CSS.
Here is a link to a video showing the behavior: https://www.csmckee.com/dashboard_internal/Video.mov
If you are on iOS 13 you may be able to see the behavior in this example - touch the blue square on the frog image: https://www.csmckee.com/dashboard_internal/frog.htm
I think it is a bug introduced in iOS 13, caused by the removal of the 3D Touch code and its replacement by Haptic Toutch.
Notice how the sheets links at the page bottom also get "deattached" from the page and slightly zoomed... That seems to be the behavior for links before opening the preview popup.
HTML map areas are essentially links, so maybe Safari is getting confused and zooming the entire image.
It doesn't help that image maps aren't responsive (Responsive image map), so not sure playing with the viewport meta value can help.
Maybe opening the URL inside an iframe? I noticed small differences on the Haptic Touch behavior in iframe scenarios.
You can prevent Safari from automatically zooming in without disabling the user’s ability to pinch zoom. Just add maximum-scale=1 but leave out the user-scale attribute:
like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If your website is properly designed for a mobile device you could decide not allow scaling by adding user-scalable=0
I'm having a problem on a web page where an orientation change (landscape to portrait, or portrait to landscape) causes the window to display incorrectly:
The display reorients, correctly for a brief instance, and then an incorrectly scaled column appears on the left hand side. The incorrectly scaled portion of the window is part of the pre-rotated page (oriented correctly).
Reloading the page fixes the problem (until the next orientation change).
At the moment, I only have an iPad mini 7.0.3 to test on.
For tablets, there is no orientation change function, and this displays fine on Android tablets.
I can't find anything online about this... is it a known bug?
The viewport meta looks like:
<meta name='viewport' content='width=device-width, width=device-width, height=device-height, user-scalable=yes'>
------------------------ update: ------------------------
I whittled down the page, and the results are:
1. I have included some fonts from http://openfontlibrary.org
2. I have a <ul> on the page
If I remove either of these, the problem goes away! (probably something other than <ul> will cause this as well, since at least one of the pages shows the problem without this tag).
Will research further... it would be a shame if I couldn't embed fonts!
you can try adding this to your body tag:
onresize="location.reload()"
this should reload the page when the vieuwport changes.
I have a Flex Mobile application that is making use of StageWebView to load a local HTML file.
I have been debugging it on my PC using the inbuilt Emulator (simulating a Galaxy S3 screen, 1280x720, 320dpi) and on my actualy S3.
The app has the StageWebView viewPort set to a rectangle that uses the stageHeight and stageWidth. (1280x720)
On the PC, it displays the HTML file fully (the HTML file has a background image that is 1280x720) and there is no scrolling.
On my phone however, the webview shows the HTML file "zoomed" in (I say zoomed in, but you cannot in fact, zoom out!) and I has to scroll to view all the content. The content appears at twice the size (If i set the background image to 360x640, it fits on the phone screen without scrolling)
Why would the emulator, set to the same resolution and DPI, show the content differently?
More importantly, why is my phone seemingly "zooming" in on the HTML file and making me scroll? The content and phone resolution match, yet StageWebView does not seem to understand.
I found this post, click me, that seems to suggest there is a bug, however the guy mentions his issue is when he doesn't use the viewport meta tag, which I am using!
Does any one know how I can go about fixing my scaling issues and hopefully have my Flex application scale nicely over various devices and have StageWebView display my HTML file correctly?
If you're using meta viewport on android make sure to set target-densitydpi value
<meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi">
Or if can using css zoom, where zoom value is related to density-independent pixels (DP) value compare to html page size
Check out this article on Adobe
I was banging my head against the wall with the same problem. On the Xoom (Android 3) the local file displayed perfectly, but on the Nexus (Android 4.2.2), the content wasn't displaying correctly with stagewebview.
My solution was to change the href of the css tag. See here:
How to reference local css files in a static webview window in android dev?.
So in my local HTML file, it changed to:
<link rel="stylesheet" href="file:///styles/style.css" type="text/css" />
I'm building an iPad specific web app. Currently, I'm trying to set the page width & viewport settings to optimise the site.
What I'm trying to achieve is to have the web app take up the full screen in both landscape and portrait modes without user scaling and without blank areas to the left and right of the content.
I can achieve this with:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
and
max-width:1024px;
min-width:768px;
The problem then, is coding all of my css for the variable widths. I'd really prefer to have a single css width so that I can properly code the widths of the page elements.
So if I set the css to have a single width, I can't seem to get the viewport settings right! When I open the page in portrait with these settings:
<meta name="viewport" content="width=device-width,user-scalable=no" />
everything works fine. When I rotate the device to landscape, again it's all good. Coming back to portrait then is where I have the problems. The page is then too big for the viewport! I want it to fit the device width still!
It's seems like it should be really easy! Am I missing something? I actually don't have an iPad (holding out for v2), so im testing on iOS simulator which comes with xcode – there shouldn't be any difference though!
I've been using this.
Not sure if this helps any, but there is a way you can detect the rotation and perform actions. Maybe forcing the page to render again or check the scaling. However I've not come across this problem on the iPad so far, do you have a page we can see to test on a device?
<body onorientationchange = "updateView();">
<script>
function updateView()
{
switch (window.orientation)
{
case 0: // Portrait
break;
case 90: ; // Landscape
break;
case -90: ; // Landscape counterclockwise
break;
}
}
</script>