I am using the Titanium SDK for developing a mobile application (for the iPad). On iPad1 and iPad2 everything is fine. But on the iPad3 my Svg graphics were drawn ugly. I am dealing with a lot of WebView's in different size's to show the Svg's. Some WebView's did the rendering as it should be, but in some WebView's the Svg looks like a scaled png or jpg. The Svg's were created on demand and were embedded into html. The Svg styling is done by CSS.
I've no idea why this happen...?
Help from you would be awesome!
THX Tass
Link to a screenshot
enter link description here
Related
Our website appears fine on a Mac. However, on an iPad, the home page slider images appear very very pixelated.
I've had a look at [this article][2] and changed the JPGs to progressive, and cleared the server cache, and the iPad Safari cache, yet the issue remains.
Help appreciated.
From this answer, using background-attachment: fixed with background-size: cover causes issues on most mobile browsers. You can try using background-attachment: scroll. This won't give your desired effect, but you'll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using #media screen and (max-device-width: 1024px){}
OR
You can use background-position: scroll and include some javascript that will keep the image at the scrolled position (keeping it at the top of the window): DEMO
Maybe try to convert the image to a PNG or SVG and see if this helps. If you have a graphic designer have him do this or use one of the image converters on the web. JPEGs are compressed each time they're saved and this is a lossy compression so the image will artifact giving the pixelated look you're describing. If this solves the problem then you know it was a problem with the image itself. If it still appears pixelated then this may be a problem with the Ipad instead. I would then see if you can get a developer to set up an emulator for a different Ipad device, with Genymotion or with the built in emulator that comes with Android Studio, and visit your site on the emulator and see if the problem still persists. Hopefully this helps!
Xamarin.Forms
VS2013 IDE
I know there are other topics on this, but they don't answer my problem.
For Android, the background image works fine.
BackgroundImage = Device.OnPlatform("Resources/HTbg#2x.png",
"Drawable/HTMobile.png",
"Images/HTMobile.png");
For iOS, I can't get it to work.
I've tried the normal and retina versions of the image, which are of
the correct dimensions for those screens.
I've tried placing them in the root folder of the project
I've tried images with transparent or solid colored image backgrounds
In iOS, the background image, in any of the scenarios above, just shows a white screen ontop of all the CustomContentPage controls. I comment out the background line of code, and my page shows normally, with all controls and navigations links...
With the following code (no 'Resouces' folder), the page shows normally, but no image...
BackgroundImage = Device.OnPlatform("HTbg#2x.png",
"Drawable/HTMobile.png",
"Images/HTMobile.png");
How do you set the background image in iOS?
For this answer, I need to know the following:
Where do you put the image in the project so it's picked up properly?
What type of image do you use? Size? Resolution? Color depth? Transparency?
How do you let iOS 'know' what image to use if it's a 4s, 5s or 6/6+ iPhone?
EDIT
ContentPage.BackgroundImage is of type FileImageSource - meaning the correct resolution is loaded automatically; therefore the call should be...
BackgroundImage = Device.OnPlatform("HTbg.png",
"Drawable/HTMobile.png",
"Images/HTMobile.png");
But this still doesn't work. I'll add in the 4-inch image version and see if that helps...
This problem on IOS is solved by adding the required image to an IOS asset catalog. Xamarin.Forms WILL NOT load an image into the BackgroundImage property when it is located in the Resources folder as for versions of IOS pre 7. This might save someone some time.
I am using Bootstrap3 css/js files to make my html page responsive for all kinds of screens (iphone, android, tablets, ipad, desktop).
It works fine on desktop and mobile devices but it's not 100% correct on iPad/Tablet. There are 2 issues with iPad/Tablet:
1. Responsive image for Tablet/iPad is still not fit to screen
2. font size of the text is small
Is it default behavior of Bootstrap3 or am I missing something?
Wondering if anyone has had any experience using retina assets with the NativeControls iPhone plugin for tabbars? Using the plugin it's possible to set custom images for each tabbar button, but anything above 32x32px (from memory) becomes distorted. 32x32px icons are fine, but viewed on iPhone 4 retina display look pretty bad.
Somebody has a solution for this?
Not a phonegap specific issue, you just need to create a high res icon for the retina display, as well as the normal resolution. You can read about that in the docs here http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
img.png
img#2x.png
This is an extjs single-page application which works fine in FF, IE, and Safari.
There are several problems with viewing or using this extjs app in the iphone. The extjs panels/windows do not resize, as it would in a normal screen. When the user zooms out, the expanding viewing area is blanked out. An example image is below:
Iphone does not recognize the combo box of the extjs.
Unable to scroll down.
Viewport Issue:
The main issue is with the viewport. It does not scroll or zoom properly in Iphone.
Ext JS is not (and will likely not be) optimized for mobile devices. That's the purpose for Sencha Touch, which is the mobile framework built on Ext JS and specifically intended for iPhone and Android. I doubt you're going to have much luck resolving these types of issues using standard Ext JS.
We have experienced the same kind of problem with ExtJS and iPhones, and a slightly different, yet comparable, problem with android devices. I guess that those browsers report the screen size in a way that confuses ExtJS, so the layout mechanisms do not work. Since Sencha Touch has a similar API like ExtJS, making a Sencha Touch version of your software is probably the smartest way to make it work properly on iDevices and Androids.
Rather than using viewport, I used a column layout panel container. Most of the extjs stuff works fine. I placed this container layout into a div and specified its height and width. Also, <meta name="viewport" content="height=700" />.