The website is tavistockrestaurants.com. We are trying to make this design work well in popular mobile devices. A particular android device seems to be enlarging the text, and I am unsure why. This causes the "contact" link in the top to wrap, and causes unecessary line breaks throughout our website. Notice the form is getting pushed below the images in this screenshot? It's supposed to have white space on the bottom!
We do have -webkit-text-size-adjust: none in place for all elements (using asterisk *). Is there an android equivelant? Has anyone experienced this on any android devices?
This behavior does not occur on all android devices. We have only seen this on Android 4.x, but I cannot reproduce it with my android 4.0 emulator.
What it currently looks like:
What it should look like:
(I do not have the specific device model used in the screen cap)
In CSS, pixels are not pixels.
Or rather, 1 CSS pixel does not always map to 1 hardware pixel. On certain high-DPI Android devices, one CSS pixel can be 1.5 or 2 hardware pixels. The Opera guys have a good overview on the topic.
Samuels answer is correct.
There is a workaround though. You can target specific devices and change the styles for that device specifically using classes or stylesheets. If you are using PHP you should be able to parse the "User-Agent" and determine which device the client is using and add a class to the body tag (and use that class to target that specific device in your CSS).
There are also services that will allow you to send users to a different version of the site depending on the device they are using. Here is a site that does the work for you.
There may also be device specific CSS being generated on loading the page. Using a CSS reset may also help your site be more cross-browser compatible.
Related
Explanation:
I have created an application in which it's looking well in an android phone(480x320, such type of devices) and iPhone 7 plus and below. When I run my application into the tablet Nexus 7(nougat). It reduces the font size, Images and even height(which specify in the CSS) of my views.
In Android, we have different types of the drawable folder to easily manage multiple device support based on the values folder also.
Problem: How can I manage my application which will run on all the devices including phone and table in Android and iPhone and iPad in iOS?
Well you asked THE question. Looking through the react native elements library I found a function they call normalizeText, you can find it here:
https://github.com/react-native-training/react-native-elements/blob/master/src/helpers/normalizeText.js
Basically they take the pixel-ratio api, which docs you can find here:
https://facebook.github.io/react-native/docs/pixelratio.html
and depending on the screen size they multiply the values of with/height/font using that functions with values from 0.5 to 2. I found it a good solution to get a good visuals on every platform.
For the UI I would recommend you to use flex as much as you can, because it gets your app independent of width and height.
If you need some clarification feel free to comment.
I have created a fairly simple responsive website and have optimized it for mobile use using the meta tags. It works very well on desktops and on iOS phones and even the Galaxy S5. However, based on some tests using a browser compatibility program, the design falls apart on Android devices using 4.2 or lower (including the Samsung Galaxy S2 through 4, Kindle Fire 2, and Google Nexus). The images (doesn't seem to matter what type of file) will either become very vertically stretched or disappear altogether, no matter the file type. I have tried many things and can find no apparent difference between the images that are displaying and those that are not. Also, my header and footer are no longer where they are supposed to be. From what I can tell, the problem is that Android is not interpreting my css in the same way as ios does.
I have been able to fix the problem somewhat by dictating pixel dimensions for all of the photos instead of percentages, although this messes with the responsiveness of the site. This also fixes my header/footer problem although there is a very large space on the top and bottom of the mobile drop down menu and my logo in the footer (.svg) is distorted despite giving it dimensions.
I can't seem to find any information about this problem so I feel like it has to be an easy fix that I am overlooking.
The website is www.2015housingconf.com.
Thanks in advance!
In farsi letters are attach together to form writing scripts. However when I save HTML pages using "UTF-8" or "Windows-1256" encdoings, and try to display them using webview in android, letters are diplayed seperately and in left-to-right direction (instead of RTL).
I should notice that this case is not happening in phones supporting farsi.
Correct form should be like this (snapshot from phone supporting farsi):
Bad-formed text happens in phones not supporing farsi (Persian):
It should be noticed i've used persian font in both cases.
I also see some solutions for normal Strings in java which changes character on by one in this
question
My question: Can i fix this cases (or it should be fix by phone vendors)? if possible what is solution?
I hit this bug a lot when I was doing keyboards. The problem is that the build in canvas.drawText function in Android didn't support RTL languages. There was a patch for it, but it wasn't part of the default build of Android. So only models going out to those parts of the world that used it tended to have it. Unfortunately I know of no way to test whether it has the patch. And if it doesn't, there's no way to fix it. You could try reversing the text, but then you'd break devices which did have the patch.
Long story short- there is no way to fix it. However, I'd be shocked if Google hasn't picked up the patch in mainline by now (it existed back in the 2.2 days), so its a shrinking number of phones effected.
You can try making html with reverse font sequence! just write a windows app to get font and deliver reverse one, and use it in your android device
How can I make a website(which is exist before) compatible with android?
So that we can use every functionality of that website on our android device.
Have a look at this link: http://developer.android.com/guide/webapps/targeting.html. The same rules would apply for making a website. One of the most important things is adding this line:
<meta name="viewport" content="width=device-width" />
This tells the browser to set the zoom level according to the device width. Otherwise the site will be zoomed out a lot and the user will have to zoom in to see the text properly.
Almost all of your website's functionality will work in the Android browser unless you have some really screwed up Javascript code.
Have a different stylesheet for the mobile browser.
Keep lower resolution graphics as bandwidth is a huge issue on phones. An EDGE network is too slow and even 3G speeds vary a lot.
Do not keep the pages too long. Display sections as Accordion menus which will expand/contract when the user clicks on the headers.
Do not keep drop down menus which are activated on mouse hover. There is no hover state on the phone.
This article from SmashingMagazine has a couple of other tips.
have a look at WebView here. I did this with an Internal site of mine. Basically I scaled it down in size and graphics. Depending on the amount of content it could be easy or more difficult.
rewrite/modify it to be compatible with mobile browsers. Its not something that you can just add a stylesheet for.
Android's webbrowser, at least for recent versions of Android, is quite powerful, and quite close, in terms of features, to a desktop one.
So, if your website doesn't do any too-fancy / special stuff (like super-recent HTML5), it should work quite well on an Android device.
Note, though, that if you want your website to work on a mobile device, you'll have to at least think about :
The fact that 3G (or worse) network is slow (bandwith is not great ; and ping is not good either) ; don't make your pages too heavy.
The screen is small : don't put too much data on it
Using touch-screens with big (compared to the screen's size) is hard and not precise : use big links, don't have links too close to each other.
TOPIC Solved: Answer below.
Some users have been reporting border alignment issues on some android components such as the alert popup or the editTexts. This is happening on the Samsung Galaxy Apollo (200x400) and the HTC Pro Touch (480x640) devices. I cannot replicate that because i don't own those devices and in the Samsung Galaxy S and emulator everything looks just right.
I think that the problem is the dpi or resolution of the device (because the edittext background is a single .9.png so image should look ok); however I am not sure if the supports-screens tag is the solution. Also, application was developed using Api 3 (v1.5) and supports-screens was not yet supported, nor the screen-size resource qualifier.
The style used for the alerts and editText is the phone default. Could the problem be something related with the theme applied to the phone by the user?
Thanks in advance!, I show some images given to me showing the problem:
It might actually be the display density causing this. If you don't provide assets in the appropriate density, the framework will try to rescale your images, including 9patches. Unfortunately there's no real perfect way of resizing 9patches and it can sometimes lead to artifacts, although I would be very surprised if it caused the type of artifact you are seeing.
I've had the same problem and the solution was changing the font size of the TextView from 16px to 17px (or any other odd number).
Well it really was the resolution/density. I managed to create an emulator with the WQVGA density (which needed > Android 1.6) and replicate the error.
The solution is seen on the Supporting Legacy Applications section of the Android Developers webpage: http://developer.android.com/guide/practices/screens_support.html. So a newer version of the API is needed in the project but it still holds support for the 1.5 version.
Thanks.