i'm pretty new to PhoneGap.
For my first project I designed a website with Adobe Muse and built it into an APK with a normal, empty PhoneGap-Project.
It works very well, but when I rotate my Device (it is a tablet and the app is only meant to run on a tablet with Android 5.0) I experience strange problems with my web page "zooming" out of display on the right and the bottom.
And every time I rotate it back and forth, it zooms one step more out of the viewport.
Pic 1
Pic 2
Pic 3
Does someone know this problem - or even better - a solution?
Will be very thankful for every hint!
Edit:
I used PhoneGap-Build.
No plugins or something were used.
I have slider widgets (the ones from Muse) on the pages where the error occurs.
Related
I’m quite a newbie around here so this kinda feel like I’m learning sanscrit. Thrilling and overwhelming at the same time.
Anyway, the thing is I'm using wordpress at my laptop and I'm sttrugling at keeping my pics at the size expected when I switch to android. They look totally fine on the laptop preview for the phone, but on the real world they're basically turning into a thumbnail. I attach a picture of expectation versus reality
I apologize in advance because I suspect this is part of the ABC of programming; I don't even know if I should be uploading my pics with a particular size. I promise I'm training to become a proper padawan, and 'll appreciate any feedback.
Thank you so much for your time, and have a great day!
If you are starting with Wordpress, best thing to do is to work with themes supported by Elementor & one that allows you to modify the design for desktop, tablet, & mobile versions separately.
-Select 'Edit with Elementor'
-select the section with these six pictures. in the '#Edit Section' box at the right, you will see three options- layout/content, style, advanced.
-Select 'Advanced' and scroll down till the bottom section.
-Select the 3rd last option, 'Responsive'. From here you can hide the mentioned section for mobile.
It would look something like the attached picture
DO BEAR IN MIND THAT I HAVE ADDED SAME BUTTON TWICE - the button at the left is visible to site visitors using desktop/tablet. At the right part, you can see same button blurred. That's 'cause I hid it from Desktop & Tab.
Similarly, you too have to add section with pictures again to show in mobile only.
For that, find and click on Responsive icon & select Mobile.
Decorate the section just the way you want and do not forget to hide it from PC & Tab.
Following up on my previous post on animation trouble (Codename One Animation Trouble (also in Solitaire demo)?) in my app and in the Solitaire demo. The simulator and iOS problems are solved, but there remains the issue on Android devices. (Test: Nexus 7, Android 5.1.1; CN1 3.3.1)
In my checkers app, when the computer makes a move, the checker starts moving but the destination square briefly flashes (while the undo/redo animations work fine). This is similar to what happens in Solitaire: when a card starts auto-moving, but only if it is the second move or higher in a row, the card it will land on top of usually flashes (as if the button is pressed?). This also happens in the deal-from-deck animation (many moves in a row).
In my app it looks like the checker is very briefly (one frame?) shown at the destination location and then it starts moving from the source location to the destination location as it should. The same probably applies to Solitaire.
In issue #1640 you mentioned:
'This is probably related to the Android pipeline work we are doing and has nothing to do with the animation framework. We'll take a look at that and try to figure out what happened there.'
When is the improved Android pipeline scheduled?
Would you like me to submit a new issue for this?
I think this works better with issues ideally with smaller scopes (one issue per post) and ideally with a simple test case the demonstrates the issue.
The issue tracker is probably a better place for bugs than stack overflow.
All!
I have a perplexing problem that occurs only on some specific phones-- but they're the phones that my customer wants the app written for, so I need to deliver. :-/ The site that I am working on consists of fourteen jQuery mobile "pages", and two of them are exhibiting the following behavior:
I have an issue where pages being loaded from the browser's cache-- whether by pressing the browser's "back button" or simply reloading a page that has been previously rendered-- is broken:
While the page renders correctly, the bottom of the page is either "cut off" and can't be scrolled to, or a medium amount of "new" blank content is inserted at the bottom of the page.
When the latter occurs, the UI controls are "shifted" by the length of the new blank content compared to where the user was tapping: If an inch was "inserted" when the page is displayed for the second time, tapping on the screen triggers a click event in the location an inch "higher" on the page than where my finger touched the screen.
I will note that this problem appears to occur only on pages that have enough content to scroll off screen; pages that have small amounts of content do not suffer this problem. There is no dynamic content being added to these pages.
It appears that once a page is created and then a different page is displayed, something breaks in the DOM when the previously-created page is redisplayed.
The mobile sites run perfectly in Chrome and Firefox on a PC; they manifest themselves only on certain Android phones. One phone model that is giving me particular headaches is a Samsung SGH-I437P running Android 4.1.2.
I'm using the latest versions of jQuery-- rev 1.9.1 of jQuery, and 1.3.2 of jQuery mobile.
What I think I need to do is to tell jQuery to completely rebuild the page, but am unsure if this is even feasible, as the since the page has already been loaded into the DOM with all the jQuery mobile "embellishments"-- so there's no "bare-bones non-jQuery-mobile" HTML to rebuild the page with.
However, searching for page rebuilding / reloading hasn't turned up any concrete hits-- there was a way to do this with older versions of jQuery Mobile, but this does not work for the latest version.
Has anyone else experienced this behavior and know how to counteract it? My team of two have been focused on this for weeks to no avail.
I have developed an application using Sencha Touch 2.1 Framework. The application being installed on the HTC ONE device running on Android 4.0.x version.
It is observe that app's response time is very slow while
1. Traversing from one screen to another screen
2. While fetching data from server
3. After a tap on any icon, loading mask takes time to get displayed
4. Due to screen transition is taking time, the header of previous screen gets displayed on current screen momentarily and then only the header of current screen is displayed.
The app is working appropriately on the Samsung Galaxy S2/S3 running on same android version.Appreciate any help in this regards.
Browsing internet on this topic gave me couple of links which points to turn off "toggle Ciphering". But that didn't helped either. The links mentioned below.
https://forum.xda-developers.com/showthread.php?t=1118017
http://www.addictivetips.com/mobile/how-to-improve-slow-data-speed-on-htc-sensation-data-latency-fix/
Applying the below CSS to the component like titlebars, panel of home screen resolved the issue.
.x-panel {
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
I am working on an Android/Cordova app with an embedded map view using leaflet.js. The device I am using is an Nexus 7. The map is loaded using a TileLayer and all is good until... I click on a form select control in a form and the native Android picker appears. From there on the map tiles are all shifted a few pixels in both x and y direction. When I run the web app in the Chrome browser on the same device there is no issue. Seems isolated to with the Cordova DroidGap or Android WebView. Looks like something weird is going on in either the DOM or WebView container which throws the tile images off. Tried inspecting the map container size before and after the select was clicked but there is no diference. Tried logging the DOM and same in both case its identical.
Anyone have any other suggestions where to look?
Is there any way to disable this native select picker?
WOOOOHOOO! Found it... or a solution that is. Still not too sure what the root of the issue is. To fix the problem you need to set leaflet's global L_DISABLE_3D switch to true.
I can replicated the issue in a stripped down version of my app which only had bootstrap, leaflet and cordova as dependencies. The app has a navbar with a dropdown nav item in the first row and a leaflet map in the second row. The issue only happens when its hosted in a cordova app i.e. webview.
Note: I cannot replicate the issue in either on a mobile or desktop browser.
To reproduce the issue you need to 1). click on the navbar dropdown (Account) to make the menu appear 2).then touch the map. The result will be an illusion that the tile grow in size and therefore distorting the map i.e. roads do not line up anymore and labels get cut-off. I have logged the image size before and after the trigger and got the same size. This leads me to believe hat the issue relates to pixel density or some other graphical phenomenon that I don't understand.
Still at this point it s unclear if the issue relates to leaflet, cordova, or the Android native WebView.
UPDATE: see comments below for a better solution.