I am working on a website for a Uni assignment and I have a strange mobile problem. I have created a checkbox that makes the menu hidden or visible on mobile with the checked function. It works just fine on my computer when I simulate a mobile browser in Chrome or Firefox or by using Resizer.
Although when I view it on a mobile (Android) the checkbox is not visible. I found the same on my tablet although there if I click the right part of the screen the menu appears. Both mobile and tablet are running Chrome for Mobiles though I have also tested it in Opera Mini and have the same problem. It runs fine on PC but isn't visible on Mobiles.
Here is my website: http://wonx.dk/pwdh/
And here is the relevant HTML and CSS:
HTML:
<label for="menuon">☰ ▾</label>
<input type="checkbox" id="menuon">
CSS:
label {
font-size:36px;
}
label:hover {
color:#F03B4E;
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Checkbox Default State (if deleted menu is always visable) */
nav {
display:none;
}
/* When clicked/Toggled State */
input[type=checkbox]:checked ~ nav {
display:block;
}
The issue is with ☰ and ▾ - they are not working on Androids.
For testing purposes, try replacing them with actual words:
<label for="menuon">stripes arrow</label>
Here is a demo: http://jsfiddle.net/sc0rv3na/10/
Try using images, or a special fonts instead, eg Font Awesome.
Here is a Font Awesome implementation: http://jsfiddle.net/sc0rv3na/14/
EDIT: Although that question is about Windows Phones, it basically answers this question too: https://stackoverflow.com/a/21997373/2037924
Unicode characters belong to certain fonts, like Arial Unicode MS and not all fonts support a wide range of Unicode characters.
To ensure that special Unicode characters are shown, you must change the font for the platform.
EDIT #2: Here are a couple of ways to add a mobile menu icon to your site: http://css-tricks.com/three-line-menu-navicon/
Related
I have an issue about the phone view of a website that I have created. On classical desktop browsers (tested with Chrome, Firefox), I added for get responsive behavior :
<meta name="viewport" content="width=device-width, initial-scale=1">
Unfortunately, unlike the classical view, the view on Android browsers (Tested also with Chrome and Firefox android), I have an extra horizontal grey bar which appears on the top-right of page (above main menu "sciences-coding" and I don't know where this bar comes from ?
Here the [link][2] where you can see better the issue on your android and compare it to desktop browser : maybe someone will find the origin of this bar on Android (I don't know if this is also the case on iPhone).
This issue is not related to Android or iOS. It happens in all devices since it’s a layout issue. I see this bar on my MacBook Pro using Firefox, for example:
However, it seems a scrollbar, but it isn’t. It’s generated by this HTML element:
<div class="horizontal_column">
to which these CSS rules are applied:
border-color: #000000;
border-style: solid;
border-width: 15px 0 0 0;
As you can see by changing these rules, the “fake scrollbar” change.
I use utf8 characters / symbols from utf8icons.com on my website. The symbol below is not displayed in firefox (34.0) on android even though I chose unicode in the firefox menu. I only get a grey square.
On the desktop version of firefox and chromium, it is correctly shown:
◔
.timedark:before {
content: '\25D4';
padding-left: 3px;
color: #222;
}
What could be wrong here ?
The font being used does not contain a glyph for the character and neither does any of the fallback fonts that the browser tries to use. The cause may well be that none of the fonts in the system contains this character. The options are the use of a downloadable font via #font-face and the use of an image instead.
On an android tablet, using Chrome, I'm showing a custom web page. In it I have some dropdown controls (HTML5 SELECT). With these controls I'm trying to display more HTML OPTION elements by reducing their displayed size. I'm not having success with my effort. On my 7-inch tablet the options always show up with only about 12 elements filling the display (held in portrait mode).
For example, use this CSS:
#distDV {
font-size: 8pt;
border-color: #999999;
}
#distDV option {
font-size: 8pt;
border-color: #999999;
}
with this HTML:
<select id="distDV">
<option value="30">+30</option>
<option value="29">+29</option>
</select>
On a desktop computer (using Chrome v. 25 or later) the select drop-down displays in the smaller, requested font. When I click on the control to show the values the options also are in a tiny font.
On my android tablet (using Chrome v. 25 or later) the select drop-down displays in the smaller, requested font. When I click on the control to select a value the options are shown by the android device in a standard option select, full-screen, using about 12 lines top-to-bottom on my 7-inch display. I'm trying to make this maybe 16 lines, doing this through CSS.
I'm looking for ideas. Yes, I already tried using an optgroup, to no effect.
Thank in advance,
Jerome.
As you found out it's impossible to change the font size of the option select dialog. This is for very good usability reasons. Is there a reason why you need more options shown at once? Why is the dialog's scrolling not good enough for your needs? Also remember that if you make the options too small you may frustrate your users. You may be able to accurately select an option but other people may not.
All that said you could get round these limitations by coding your own dialog, perhaps by using radio buttons. For example:
<input type="radio" id="distDV30" name="distDV" value="30"><label for="distDV30">+30</label>
<input type="radio" id="distDV29" name="distDV" value="29"><label for="distDV29">+29</label>
You could then style that however you like. Another option would be to use an input box, which may be more appropriate if all your options are numbers. E,g.:
<input type="number" name="distDV" min="1" max="30">
Got a strange one.
http://reaganhayes.com/finishes/
Displays text normally in other browsers, including iPad and iPhone, but on my Android phone it's showing the menu text and the Headings as garbage text, like "crokfpefkdp" and "d^iibov"
Here's a screenshot: http://reaganhayes.com/temp/android_text.png
In the Chrome inspector, looking at the source, the text is normal "About", "Contact", etc. I used Adobe's Edge Inspect to inspect the phone's browser and it shows normal words in the source.
I tried it on two different Android phones with the same result. My phone is a Samsung Vibrant running FROYO.UVKA6
I assumed it was a font character-mapping issue because the same word in the menu and in the headings had the same garbage text, but when I stripped out all fonts and only used Arial, it had the same results. I tried that with the actual CSS for the site, and also via the Chrome inspector.
Charset is standard UTF-8.
The Wordpress theme is a modified version of the Wordpress 2012 theme.
W3 Total Cache was running previously, but I've deactivated it while I solve the issue.
Any ideas?
Thanks!
Kenny
Just try to change text rendering method in your style.css.
From:
body {
…
text-rendering: optimizeLegibility;
…
}
To:
body {
…
text-rendering: auto;
…
}
OptimizeLegibility method is broken on Android Froyo.
Hope this helps!
I created a website, which I intend to display in some mobile devices. The thing is that I have created several menu options as circles.
To achieve this effect I use border-radius in a style sheet, and -webkit-border-radius and-moz-border-radius too.
On the computer it looks well in the browsers I have (firefox and chrome), but when I move to the android browser, these circles are reset to be square divs. This occurs since the load of the page.
may I use other special style for android? Could I need something like the jQuery mobile?
In short I will put the code, but if anyone has gone something like, could share that information, please? thanks
See this post for the answer: Galaxy S4 stock browser CSS3 border-radius support?
Just use the expanded border-left-radius, border-right-radius, etc as a workaround; it's a glitch in the new Android 4+ browser; a bug report has been submitted.
Hi I am using this for gradient. And this works fine in most of the browsers.
`background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#B4DCFA), to(#FF0000));
-webkit-border-radius:11px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.8);
/* For WebKit (Safari, Google Chrome etc) */
/* For Mozilla/Gecko (Firefox etc) */
/* For Internet Explorer 5.5 - 7 */
/*-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B4DCFA, endColorstr=#FF0000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B4DCFA), to(#FF0000));
`
Can you please post the code?