Scrolling and stylesheet problems - Mobile Web Site Design and Development forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Scrolling and stylesheet problems

Linked pages come up ready scrolled. Stylesheet not implemented

UK_Novelist

10:57 am on Oct 20, 2013 (gmt 0)

10+ Year Member

Dear All

I am not only new to this forum but also new to designing web sites for mobile devices, so please be gentle with me. I do, however, have many years experience of web site design for standard PC browsers.

I have been trying to make my web site "mobile friendly" but have hit a number of quite basic problems, listed below.

Note that I am currently redirecting users to the mobile version of my site using the following JavaScript on my home page:

if (screen.width <= 1000) {
document.location = "phone/index.htm";
}
Is that OK?

Here are my main questions:

1. My mobile home page is taller than a mobile screen, so I need vertical scrolling, but when I first go to my site (using the standard packaged browser on my Samsung S3 running Android), I cannot, initially, scroll the window. However, if I turn the device on its side, to switch to landscape mode, then back again, magically scrolling is now enabled. Any ideas why?

2. I have a link that's a little way down the home page so I have to scroll to reach it. If I then click on the link, the correct new page is displayed BUT it's scrolled down the same amount as the page I just left. In other words, on following the link, vertical scroll isn't being reset to zero. Again, any ideas?

3. Final question. I have a page where I want to display the same content on both PC and mobile devices but using different font sizes etc. I have a separate style sheet for mobile. I therefore tried the following in my <head>:

<link REL="stylesheet" TYPE="text/css" HREF="Panel.css">

<script type="text/javascript">
if (screen.width <= 1000) {
document.styleSheets= "phone/ps.css";
}
</script>

Unfortunately this seems to have no effect. It doesn't switch to the ps.css style sheet and the text comes out using the font sizes from the PC style sheet (Panel.css). Is there a standard way to use the same page, but with different style sheets, for pc/mobile?

For your reference, in case you want to look at the site, it's [writerman.org.uk....]

Thanks in advance
Keith Sheppard (children's author)

SevenCubed

4:39 pm on Oct 20, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Welcome to Webmaster World Mr. Sheppard! No doubt a member or two will be along to try to help you with your dilemma. The most likely one lives across the pond from you on the left side of the same rock as me. Probably still asleep right now too, or just pouring first cuppa java.

Offhand I know there is a bug in one of the mobile devices that is characteristic of item #1 you described above, I just can't remember which one and I don't have it recorded anywhere. I do have a snippet of code here that I was experimenting with so I'll just throw it into the mix, it might help for others assessing this.

<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />

I also noticed you are using frames. That might be complicating things too.

I think that is what I used to overcome the issue you are experiencing but I don't have a mobile device handy to test it on (I still use one of those "beam me up Scotty" types of mobile devices).

UK_Novelist

5:42 pm on Oct 20, 2013 (gmt 0)

10+ Year Member

>>I also noticed you are using frames. That might be complicating things too.<<

Only intending to use frames on the PC version of the site. On a mobile device it should switch to the phone version which is non framed.

lucy24

8:32 pm on Oct 20, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Hey, 343, are you planning to beat me to every thread? :)

if (screen.width <= 1000)

I have been learning about screen width recently-- see nearby thread, possibly even in this same forum-- and it turns out to be a much ickier and messier subject than you would think. But you shouldn't need to do any scripting; the basic format is

:: shuffling papers ::

<link rel = "stylesheet" type = "text/css" media = "screen and (max-width:960px)" href = "two.css">

... and then it gets messy. For starters, iOS devices lie through their teeth* about their width, so you need

<meta name = "viewport" content = "width=device-width">

to cover all iOS devices-- in fact almost everything, of any kind, using webkit. Some non-webkit devices may also respond to

@media screen and (min-resolution: 192dpi)

(adjust numbers to taste). See that other thread, if you can find it.

* Some will argue that the device isn't really lying. Sure, if you've got 500/20 vision...

SevenCubed

8:40 pm on Oct 20, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hey, 343, are you planning to beat me to every thread? :)

Naw, just throwing a log on the fire to get things warmed up for you. Just so you'd feel the warmth while peeling back the koshas as you're stretching and wiggling your toes.

graeme_p

5:40 am on Oct 21, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Using media queries and the viewport metatag, a few things to add:

1) You can use the media queries within a style sheet: you have common elements outside the media query and size-specific stuff inside, or desktop outside, overrides for mobile inside at the end), etc.

2) You can measure screen width in any unit you want to use. I advocate the use of em units as it avoids issues with small but high res screens (e.g. retina) etc.

UK_Novelist

4:49 pm on Oct 21, 2013 (gmt 0)

10+ Year Member

Thanks for all the helpful and (to this newbie) slightly baffling responses. I shall sift my way through them and hopefully work out what to do.

SevenCubed

5:15 pm on Oct 21, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I advocate the use of em units as it avoids issues with small but high res screens (e.g. retina) etc.

Agreed very much. When you consider that google has 200+ items of criteria to measure worthiness of a website and bing claims 2000+ it's obvious one needs to pay attention to something like ems as units of measurement due to rise of mobile popularity.

I've recently had to rework some of my older websites and used the opportunity to revamp everything to ems for units of measurement. It has strong mobile benefits. Got last one scoring 100% on both desktop and mobile as per google Page Speed Insights tool.

The website optimization results in a universal site with a uniform experience across all devices and there is benefit in that (as one of many onsite factors) for boosting SERPs.

@UK_Novelist your website isn't overly complex, it might be worth considering bringing it up to standards of HTML5/CSS/SPRITES/EMS-FOR-MEASUREMENT/RESPONSIVE-FOR-MOBILE.

If you're attached to the effect of frames you can substitute it with CSS Layers for an equivalent user experience.

Throughout that process you'll probably resolve your other dilemmas that you pointed out too.

There are sources of basic free responsive design templates out there that you can learn from and adapt for your need.

Overall it would be a worthwhile effort because you'll gain higher placement in search results.