I have a specific problem that leads me to a general question.
My specific problem is that a css style that I have written,
[data-role='collapsible'] > :first-child .ui-btn-inner
works fine in a pc browser, but not on my android 2.3.
Since I have not figured out how to debug android sites (like firebug for FF), I cannot look at the android-rendered page to see if maybe the jqm framework did something different to data-role='collapsible' on the android.
So my question: does the jqm framework treat pages differently depending on the device?
Related
I'm trying to build a website using the technique described in this article: pure CSS parallax.
This technique requires browsers to support 3D transforms (and specifically perspective/preserve 3d).
It's working on the majority of devices and browsers no problem, and where it doesn't it is easy to detect if it'll break (such as lack of transform-style: preserve-3d in IE, or lack of 3d transforms at all) and fix it accordingly.
However, one browser stands out in exceptionally f*******g me over when I try and make it compatible to any degree - Android stock browser. Versions of the browser on Android 4+ support css3d transforms but are completely incapable of rendering them properly, with the big bug being that -webkit-perspective: 1px, while technically supported has absolutely no effect in this case (transform: translateZ(xpx) elements).
As far as I see it I have two options:
Detect the Android stock browser and serve CSS accordingly
Detect perspective not to be working and serve CSS accordingly (unlikely)
I've yet to find a foolproof/futureproof, elegant way of detecting the Android browser on the back end with PHP, with the only options being hefty API's and what I consider to be lacklustre abuse of mobile detection libraries.
I have absolutely no idea how I'd go about doing no.2.
Any help appreciated
I've got an issue that I'm trying to get to the bottom of and I can't seem to find an appropriate answer. Our mobile website - currently in test - uses a 3D Secure iframe.
Our tests have confirmed that where the iframe displays properly when using an Android phone (in-built webkit-based browser, Samsung Galaxy S II), it unfortunately does not for an iPhone (again, in-build webkit-based browser, Apple iPhone 4S). The iPhone simply does not display the iframe. I'm uncertain whether the iframe won't show or if it is merely positioned off-screen (but there are no CSS properties applied to either the iframe or parent that would affect its position/float/margins/padding).
Is there a major difference between two webkit-based browsers on different phones which would account for this? Has anyone suffered from the same issue? And if you can help, how do I try to solve it?
<iframe id="authenticationFrame" name="authenticationFrame" src="3d-secure-bit" height="400" width="330"></iframe>
Thanks,
This question is based on What do I need to know to make my website work on mobile browsers? which was posted in 2009 with some old websites and specific Microsoft stuff
I make web-apps mostly in Django and it doesn't seem to work very well in Android/Iphone/other mobile devices.
There are some apps like django-mobile (https://github.com/gregmuellegger/django-mobile) that offers you the possiblity of making different sites depending on the flavor of the device. The problem is that we almost have to make 3 websites if we want to use it in Android, Iphone and PCs.
There are some W3C recommendations (http://www.w3.org/TR/2006/CR-mobile-bp-20060627/) from 2006, with I think is obsolete because 6 years made the internet and the devices completelly different.
Any contributions concerning that?
As far as I know (correct me if im wrong) Django is a Python framework, so it runs server-side. That should not effect anything running on the phone. All smart phones will be able to run HTML/CSS and JavaScript/jQuery.
If you are talking about how the page is displayed on such a small screen there are several options:
Have a responsive design that adapts to the device's screen size. Have a look at Bootstrap.
Have a separate mobile site and something that will detect a mobile/tablet device and forward it to the mobile site running on a subdomain like mobile.mysite.com.
Have a non-responsive site and use the viewport meta tag.
Another option is to use css media queries, which allow you to set conditional css depending on the screen or browser dimensions like this :
#media only screen
and (min-width : 325px)
and (max-width : 500px) {
/*CONDITION CSS*/
}
The nice thing about media queries is that you can get really detailed in theory you could have a media queries for 100's of devices specifying specific css for both the devices landscape and portrait mode.
Here's quite an interesting article about the Romney versus Obamas campaign and how each party has chosen to develop their mobile sites differently.
I developed an application for android using jquery mobile and phonegap.
I deployed the app to my device over usb. The performance of the app ist really bad, especially while scrolling a longer list.
The strange thing is: The whole app runs smooth if i just open up the browser on my phone and access the index.html directly. Same technology, same content. I do not use the phonegap native api or anything similar.
Tested with phonegap 1.5.0 and 1.7.0rc1, jquery mobile 1.1.0 on android 4.0.2.
Any ideas?
On honeycomb (3.0), Ice cream (4.0) and posterior devices, you can boost performance by adding the following in the < Application ... > tag:
android:hardwareAccelerated="true"
You could set the minSdk to 8 (Android 2.2) for compatibility and the targetSdk to 15 (Android 4.0) and that would make hardware acceleration work when its available on the device only.
I believe that with this flag the performance of my apps is equal to running them in the browser, so I guess its because the browser was coded with hardware acceleration :)
I had a similar problem: a page with a longer list of "medium complex" themed divs. The browser of HTC phone had no problems in displaying. But within the phonegap app rendering failed completely. I saw a kind of WSOD, which disappeared only after touching the display. After touching, the page was displayed correct.
The problem was not in place, when I shortened the div-list to one or two div-elements or when I reduced the sub elements within the divs and reduced the render effort caused by the css complexity.
The white screen looked like, if the whole body was invisible, since only the documents background-color was displayed (I added a light pink for this). So I guess, the rendering was the problem after reading this thread
I tried the various proposals I found in this thread to make the app work without the "WSOD". But nothing worked. Some of them made the app displaying really worse.
Finally, after a whole day of searching, I made it. I set within the tag (not the tag) of my AndroidManifest
<application android:hardwareAccelerated="false" ...
Now the app behaves in the same fast way as my webbrowser. Seems like, if hardware acceleration is not always the best feature...
My versions:
phonegap 3.5.0, Android 4.0.3, jQuery v2.1.0, HTC Sense 3.6
Found an answer here: http://groups.google.com/group/phonegap/browse_thread/thread/94da1cf881abe995/6d4f7aea7aeba523?lnk=gst&q=performance
There is probably a difference between the native browser and the webview in terms of javascript performance.
If you can confirm the browser performs better (that it's not something suboptimal in your code frustrating one but not the other), you could consider deploying as an html5 offline application so that you will actually run in the browser.
We bumped into performance issues while scrolling the same amount of list items with jquery mobile. The performance was so poor (we didn't even try in PhoneGap environment) that we rewrote the app using iScroll library... now the app scrolls really smoothly.
If you are at the beginning of the development, you could try to change the UI library.
After this situation we deploy our apps to test devices quite often to manage performance issues in time... this became a "policy" :)
Working on a mobile web application, I have found that some Android devices are rendering CSS differently than others. The detail on the site renders perfectly on every desktop browser I have tried on Windows & Mac, on iPhone, on every Android SDK Emulator I have tried, and even BlackBerry. While some Android devices render it perfectly, about half do not - and these "misrender" it in consistent ways. (For example, it looks great in a Galaxy, but is offset when using a G2.)
Aside from purchasing every single Android device on the market, is there any way to test CSS across all the devices available?
Thanks in advance!
In fact: you can use the emulator to replicate CSS differences. I didn't try enough variations.