Trying to make a basic stylesheet for smart phones but for some reason the CSS only menu button doesn’t work on iPhone. Menu does not open. Also for some reason the iPhone puts a nasty black margin down the right hand side.
On the Desktop (Firefox and IE), laptop and Android smartphones this displays as expected.
Any idea how to fix on iPhone without adding any scripting?
Web page here:
http://prueba1.elmoralet.com/
Stylesheet here:
http://prueba1.elmoralet.com/css/phone.css
Firstly, hover doesn’t work on touch devices, so a CSS hover menu can’t work there. I suggest you look at some of the pre-written menu scripts out there, as they deal with a lot of the difficult issues associated with mobile menu functionality. For example, there’s http://responsive-nav.com/
In terms of the black bar on iPhone, that’s the black background image showing up, caused by some long, non-breaking links in your text. It might be worth adding something like this:
a {
overflow-wrap: break-word;
word-wrap: break-word;
}
Hmm, :hover works on Android.
Thanks for the info.
Ah, right. On most touch devices it doesn’t work, though. An actual click is needed.
You seem to have fixed it by adding scripting 
Although you can use hover on mobiles to show menus its very unreliable because you can’t get rid of the menu afterwards so its always best to add a click action with js instead (although you can use the ‘checkbox:hack’ for modern browsers to avoid js but is a little more complex).
To make the hover work on ios you can add an empty onclick handler to the element and then the hover will work.
e.g.
<div id="side" onclick="">
Then this will work.
#side:hover ul{display:block}
However the issue with this is that clicking the hamburger again will not make the menu disappear if the user decides that they don’t want to navigate away from the page (this is actually a problem in your current version also and you need to toggle the menu on and off but you seem to be just toggling on).
If you are supporting mobile then you need the viewport meta tag in your head otherwise the device just scales the page very small so that it fits and is thus unusable unless you zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Lastly I note you are using a min-height of 90em on the main container and that smells of magic numbers and should be avoided. Let the content dictate the height.
Script closes the menu if you tap outside the menu area. Is this not happening on an iPhone.
Why is viewport necessary if the stylesheet is for smartphones?
Yes that happens but is not intuitive. Clicking the hamburger should close the menu also. This is accepted behaviour for hamburger menus and it is wise not to break users expectations.
I already explained why you need the meta viewport tag. It is imperative that you use it or the device will assume your layout is 980px wide and simply scale it smaller until it fits the device making the site impossibly small to use.
Have you not noticed how small your site is when viewed on a mobile device (especially the contact form? No mobile sites are designed theses days without the viewport meta tag in place.
Your answer also begs the question of why this is a mobile only style sheet? That seems to indicate that you are somehow detecting if the site is being accessed by desktop or mobile and then redirecting accordingly. If so that is something you should avoid doing as device detection is difficult and mostly unreliable and a waste of resources to manage 2 sites (mobile and desktop).
What you should be doing is creating a responsive site suitable for all devices by using suitable media queries.
Either way it is imperative that you add the meta viewport tag and style the page so that it is usable on a small device. You don’t just scale the page smaller!
The hamburger is a CSS image. If I made the menu close by clicking on it how would I ever be able to select anything from it. Please explain? Are you suggestion I add something else in the html?
And why would the site display at 980px wide? There is no width specified anywhere in the stylesheet apart from in percentage in a couple of places.
It will assume 980px because you don’t have the viewport meta tag in place. That’s how devices initially handled the fact that websites were not designed with mobile in mind so they assumed a width of 980px and then scaled that width until it fits the smaller viewport resulting in tiny elements (just like your site). The details are slightly more complex and devices vary in how they accomplish this but the idea holds true for most devices. What always happens though is that everything gets scaled smaller in one way or another.
Here are three links that may help:
https://www.sitepoint.com/community/t/mobile-viewport-orientations-initial-scale-1-0/38495/13
The viewport meta tag was invented as a way of telling devices that they should not scale the site to fit because the author has taken control and will address those problems by making everything fit properly.
Take a look at any mobile site and you will see that they all use the viewport meta tag and this is the one I recommend.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You could possibly build a mobile only version without using it but you’d have to hack everything to fit by making it all larger to start with so that when its scaled down it looks ok! That’s a crazy way of designing as you are simply guessing at what it may look like unless you continually monitor the device.
Lets take an example of your contact page.
This is what it looks like now:
The body text is ok because you have set it to 41px (approx) when seen on the desktop but when seen on the mobile the text is only showing at about 14px because it has been automatically scaled by the device. This is not a good way to design. If you say xxpx then that’s what you want to see on the device as well. You never want to guess.
Look at the form element. They are too small to be any use on mobile yet on the desktop they are perfectly normal. They have been scaled smaller because of the viewport rules I have been mentioning all along.
If you add the viewport meta tag as I instructed then the device will display exactly what you wrote. Of course because you have now enlarged everything massively to get it working it will be much much too big on the device because it will display your body text at 41px.
Now the question is “do you want to keep guessing at every measurement you make or do you want to make it the right size to start with?”
Take a look at any mobile friendly site and they all use the viewport meta tag where responsive design is called for. The benefit of the viewport meta tag is that you can reliably work on the desktop and just narrow your viewport to a small screen mode and you can see more or less what it will look like.
As I asked at the start I still wonder why you are crating a mobile only version anyway? You should be creating a site for all devices and using media queries to accommodate the display at different widths.
That’s another poor design choice and not very accessible as the hamburger should be its own element in the html rather than a background image on a div. Html is about structure and it should be mostly clear from the html alone what the elements you are using will achieve. Obviously you can bend the rules where need be but it would be so much better if the hamburger was its own element rather than just a background to a div much much bigger than itself.
As an aside your dropdown menu that appears when clicked is also a little too small and doesn’t meet the guidelines for clickable links on mobile.
Lastly, I mentioned the importance of magic numbers and not hard coding heights and this is what I see when I scroll down your history page.
As you can see you have a blank screen with just a footer at the bottom. This is clearly broken and not a maintainable method for your pages.
If you are interested in fixing all these issues we can help you move forward and learn how to do it properly or you are free to continue with your own methods as you please.
Thanks for your comments.
Right, I take on board what you are saying about the meta tag.
The reason the hamburger doesn’t exist in the html is because it is not part of the desktop website. So it only exists in the phone stylesheet. The menu is completely different on the desktop version. My intention was the html was identical for both versions and I just change the stylesheet.
How else could I handle this?
Generally you would use media queries to trigger the showing of the hamburger and the hiding of the menu when there is not enough room for the menu to fit the width of the screen. This is based on the requirements of the design and not some imaginary device size.
Here is an old example showing the hamburger in action (this is an old demo and could be tidied up a lot):
Chasing devices is crazy as there are hundreds of them all at different sizes.
There is no ‘mobile web’ as such because some phones are bigger than tablets and some tablets bigger than laptops. Some tablets are mobile enabled and some are not. Some laptops and desktops are touch enabled also.
There is no simple solution that can identify each device so you need to forget about device sizes altogether. Just grab the edge of the viewport window on the desktop and make it smaller and smaller. As soon as the design looks awkward and doesn’t fit then apply a suitable media query at that width and make the design fit better. e.g. for your menu you would show the hamburger once the menu no longer fits neatly.
With a fluid design and a few well chosen media queries you have just catered for every device that exists now or in the future.
This means that no only do you cater for every device automatically it also means you help desktop users who work with multiple applications open at the same time (like I do). In the end your only interest is in how the design looks and then change it when it no longer fits the space available. You can do this all on the desktop first and then refine later when you check in various devices.
Ok, so let’s say at a certain width we switch between the hamburger menu and the permanent one. How do we disable/enable the javascript that shows/hides the menu?
You don’t have to enable/disable as you only enable it once on page load. The hamburger is hidden with the media query so can only be clicked when it’s showing.
There are many examples on the web showing how to do this and as you see from my demo you can if pushed do it with css alone although I think is is safer to use JS for greater browser support.
If really needed you can use ‘matchmedia’ in Js which is like media queries for js but there’s no real need here.
Take a little time to search around the web as there are some good examples of how to make hamburger menus work.
If you are still stuck then show an example of your desktop menu and I’ll try and show you how to tie it all together.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
