Im developing my first mobile website and i just found out that this "three lines" Unicode ☰ wasn´t working on my samsung galaxy s2 so i updated that for this unicode ≡
My question is if there´s a way to ensure that the three lines shows up in every mobile browser using unicode? or should i upload a icon or images instead for the three lines?
i dont know if this has anything to do but this is the div containing the unicode
<div id="uni">
<a id="menu_bar" href="">
<p>≡ ☰</p>
</a>
</div>
thanks for the help!
According to Unify, a table that lists Unicode support across browsers and devices, U+2630 has 58% overall support while U+2261 has 96% overall support.
My question is if there’s a way to ensure that the three lines shows up in every mobile browser using unicode?
It depends on the mobile browsers you want to support. Given the abovementioned info, U+2261 is probably good enough, but if you need full support in modern browsers, consider using icon fonts or SVG images instead.
Related
I have following problem. My custom font in Wordpress, Wittenberg and Drunk Text Wide Medium, work fine in Android devices as well as in Chrome and Firefox on a PC, but not on the new Safari 14.0 version as well on all browsers in iOS devices.
It only happens with special characters like ¿ or letters with accent marks. For example I will attach some screenshots:
First example
Second example
How can I fix this issue?
Text may not display correctly if the web page uses characters that are not part of the default text encoding and the page does not indicate the correct encoding.
Is your page encoding in UTF-8 ?
https://support.apple.com/fr-fr/guide/safari/ibrw1031/mac
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,
While I'm developing responsive website I have used this uni-code ( » ) to the read more links. It is displaying correctly in desktop browser but it is not displaying correctly in mobile devices like android or iPhone. Is it possible to display the same as in desktop..? What's the problem..? Whether the mobile device doesn't support uni-code..?
The problem is in the embedded font you use, via #font face. The version used by Android is apparently broken. It does not display “»”, and it has problems with many other Latin 1 Supplement characters too, see my test page. Something may have gone wrong when you set up the font files on your server.
The problem does not appear if you remove the font-family setting, letting each browser use its default font, or if you use Droid Sans as hosted by Google, using <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet'> and font-family: "Droid Sans", sans-serif.
The problem is most probably not in the display of a character (“»”, U+00BB RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK, is very widely supported in fonts) but in the character encoding. If the encoding is not properly declared, different browsers may make different guesses.
Check out the W3C page Character encodings, and make sure that the declared encoding matches the actual one.
If problems remain, please post a URL and explain what “is not displaying correctly” means (not displaying at all? space shown? some wrong characters shown? which?).
android does not support special characters, in android we need to write > to show ">" character. why don't you use image instead of characters.
As we develop our mobile version website, I am wondering how many of the browser specific CSS3 versions are necessary. The plan is for only smaller handheld devices to be sent to the mobile version, iPad, Galaxy and other tablets will stay on the main website.
In particular I am wondering about box-shadow, border-radius and gradient css support.
I have been combing the wonderful world of google and come up with the list below, of which browser specific versions might be necessary to cover the bulk of smart phones.
-webkit- for box-shadow
-webkit- for border-radius
-webkit-, -o-, -moz- for gradient
Can anyone confirm my list? Or tell me which ones I didn't list might be necessary?
Thanks
I suggest you use css3please.com to get all the possible prefixes for most of the commonly used css3 features.
As for mobile; you will not need the IE prefixes (opera has mobile browsers etc.)
Don't forget to always specify a non-prefixed version, regardless of if its already supported by some browsers, because it will be in the future, and the prefixed versions will go ignored.
To look up more specific information about property support in different browsers you could look them up on caniuse.com
I am developing a mobile version of my website which I am testing on my Samsung Galaxy S android mobile device running Froyo (2.2).
I would like to , when viewed with the standard internet browser, have a fixed header and a fixed footer ( which are always visible on screen) with the contents of the pages scrollable in between.
I tried all sorts of combinations with padding of body and the sorts (which seem to work when viewed on a browser on the pc), but can't seem to find a solution.
Can anybody help here ?
Note: if I try something like this :
<div id="header" style="position:absolute; top:0px; left:0px;height:200px;overflow:hidden;"></div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px;overflow:auto;"></div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px;overflow:hidden;"></div>
Both the header and footer are fixed but the content is not scrollable , e.g. it also appears fixed .
It might be the browser of the Android Froyo 2.2 of course.
Anyone ?
It seems that position:fixed is only partially supported in Android 2.2+, if you also add a particular meta tag. You should also note it's not supported at all under iOS. There are scripts to emulate the behavior, though(which I don't have right at hand.)
The following site explains the state of this issue.
http://bradfrostweb.com/blog/mobile/fixed-position/
The author suggests a few JavaScript solutions.
iScroll 4
Scrollability
Sencha Touch
Jquery Mobile
Since you probably only want to build this a single time and would like to support multiple mobile devices transparently, I would suggest you take a look at : JQuery Mobile
Article on page layout
If you are already working with minimal screen space, why would you want a fixed header and footer? Consider that every browser window may not be big enough for it to be practical. What happens when someone views your page in landscape and you have both a fixed header and footer?
Even on the Nexus S, at 800x480, at 100% zoom you will take up half the page in headers and footers and that's in portrait. In landscape, forget about it...
Is there another design that could work well?
What is the use for the links? If they are very important it might make sense to just repeat them another way.