CSS problem but not with CSS or me.

[euc]

This not a problem I want answers to. I have managed to work around them myself anyway.

 

I just want to know if anyone else has the same problems.

 

I am writing a web page at the moment I want to be PC, iPhone and tablet friendly. I have noticed that on my PC evrything looks fine but when I view it on an iPhone or tablet (both with Android), I notice that many settings in the style sheet that work on the PC don't work on the Android devices.

 

The culprit could just be Google Chrome because both the android devices use that and I definately don't use that on my PC.

 

Issue 1)

 

I wanted to make the links a little bigger than normal text so users would not have to expand the screen to press one or bash it with a pen. I like big links on the PC also to make them easy to get the mouse over. It's a lot easier for old people, people with Parkinsons or poorly sighted to use.

 

The PC made the links bigger but, no matter what I did with the style sheet, the links on the iPhone and tablet were so small, only a Geek with their nose up against the screen and glasses thicker than their head could read it. (No offence to people with glasses, I wear them myself.) I had to insert special HTML code with extra style information to overcome this.

 

Issue 2 - almost the same)

 

Other CSS attributes were also ignored like text-align:"center" (and others) from many of the definitions although in these others I could change the colour, size and so forth. (Worked fine on the PC.

 

It is so bad sometimes I wonder whether it's worth using style sheets at all because I don't know which are going to be ignored on what platforms although I do think they are a great idea.

 

Issue 3)

 

I think there should be an addition to CSS. There should be a default that comes at the start so that every single character and every single field for the rest of the page default to that. Then you can redefine anything else you want. It would allow you to choose what you want instead of what some lax programmer thinks everybody wants.

 

There were other difficulties as well but not CSS related.

 

What about it, anyone else had such difficulties?

Edited April 1, 2016 by euc

[Ingolme]

The first thing to do in order to make the mobile device render a page properly to to add a meta viewport tag in the header. After you've done that, you can use CSS media queries to change styles for pages larger or smaller than particular sizes. You can look these things up in a search engine.

 

 

If some of your CSS is not working on some devices, then perhaps it's because your CSS is not valid. Make sure to put units on all your values and that there is no space between the number and the unit. Be sure to separate CSS rules with semi-colons.

 

Without seeing the page itself I can't be sure what might be causing the issues.

[euc]

I didn't ask for answers because I have already worked around the problems already. You really should read posts more carefully.

 

I asked if anyone else had noticed that.

 

My CSS is valid because it works fine on my PC. I can change anything in the style sheet and it works and changes what I want to what I want. It's only on Android devices but it isn't necessarily Android. I know Firefox and IE treat some attributes differently. I have a dozen browsers I switch between to test pages which is more than most do.

 

I can absolutely gaurantee that I have semicolons between attributes. I am a Newbie to the forum but I am not an idiot or a beginner. I have been programming computers for 20 years longer than you have been alive and one thing I am good at is finding bugs and inconsistencies.

 

The issue is that the exact same style sheet works differently on different devices in that some attributes are ignored by some.

Edited April 1, 2016 by euc

[dsonesuk]

I dont know about android, cuz i never use android default browser, or android chrome, but iphone will apply its own styling overriding those set on your stylesheet, UNLESS you specify it not to do so.

[euc]

dsonesuk

 

Exactly. That's what I was looking for. iPhone uses what it wants, not what you set in the style sheets. So someone else did notice.

 

Thanks. You have confirmed what I am saying.

 

Most iPhones use Chrome on Android.

 

Question - is it Android or Chrome?

 

I suspect Chrome so I guess I wil have to download that to my PC and see what happens.

 

Funny thing is that my wife's tablet has Android and Chrome and the iPhone also but they both behave differently. Things that work on the tablet don't work on the iPhone.

 

Actually I have a website that I wrote 7 years ago and haven't touched since. It doesn't use CSS style sheets but does all the formatting in HTML but works fine on tablets, iPhones and PCs. It was my first effort using PHP so excuse the basic nature and mistakes. I am also an amatuer radio operator so just Google VK5AJL (my callsign) and you'll find it.

 

It's just lazy programming really. They should all work the same. It's no wonder many sites have entirely different sites for PC,s or Android. If Android is detected they serve one set of pages but if not another.That should not be necessary.

 

Thanks again.

Edited April 1, 2016 by euc

[dsonesuk]

Chrome Android is a operating system, Apple iphone or ipad use ios operating system, browsers are made to work on these O/S. Its much like Windows compared to Linux, browsers have to made to work for these O/S, they won't work for both unless you use emulator software to mimic one or the other.

 

Android work 99% how website will show on windows desktop, with Apple 90%, because Apple iphone/ipad show closer design to Apple Mac desktop browser looks.

Edited April 1, 2016 by dsonesuk

[davej]

This not a problem I want answers to.

 

Well, you posted it here, so everyone is free to comment.

 

Cross-browser differences have long been an issue, and now mobile devices have added their own quirks...

 

http://www.quirksmode.org/

[Ingolme]

Why am I answering your question? Because you said this:

 

It is so bad sometimes I wonder whether it's worth using style sheets at all because I don't know which are going to be ignored on what platforms

 

You absolutely should be using stylesheets and, if actually coded properly, they will work the same on all browsers and devices. No browsers or devices randomly ignore certain CSS rules (especially rules from CSS1 such as text-align). If the stylesheets are not working the same on all devices you must have done something wrong.

 

If you've been coding since 20 years before I was born you must be at least 60 years old and have been pretty rich back in the day when computers only belonged to large companies and really rich people. The web has changed a lot in the last 15 years, you have to be actively learning all the time, the programming you learned thirty years ago bears no significance on how much you know today.