Mobile browser request

user123456789user123456789 Posts: 16,589
Forum Member
✭✭
I've just got myself a Nokia Lumia 620 smartphone and noticed my website looked a little odd when viewed on the phone :( The font size seemed to have a mind of its own :(

Anyhow after a bit of a google session I have hopefully managed to get the site usable on mobile browsers (optimised for landscape 800x480 or bigger).

The site should now render with bigger fonts when on a mobile browser so it is easier to read.

As I only have one mobile browser could people please test with their devices and give some feed back.

Thanks.

URL: http://abcde.co.uk/

Comments

  • albertdalbertd Posts: 14,341
    Forum Member
    ✭✭
    Looks OK using Safari on an iPhone 4.
  • user123456789user123456789 Posts: 16,589
    Forum Member
    ✭✭
    albertd wrote: »
    Looks OK using Safari on an iPhone 4.

    Great :) Thanks.

    Does the contact page have a map on it as I have removed some content to keep bandwidth down a bit for mobile users :)
  • albertdalbertd Posts: 14,341
    Forum Member
    ✭✭
    anniebrion wrote: »
    Great :) Thanks.

    Does the contact page have a map on it as I have removed some content to keep bandwidth down a bit for mobile users :)
    It did when I first looked, but the map is gone now.

    Still comes up on Firefox under Vista.
  • user123456789user123456789 Posts: 16,589
    Forum Member
    ✭✭
    albertd wrote: »
    It did when I first looked, but the map is gone now.

    Still comes up on Firefox under Vista.

    Brilliant, thanks, I just added the code to remote it for mobile browsers.

    The site has more eye candy when on a desktop :) Though most is plain text with CSS3 to tart it up ie. the site logo
  • [Deleted User][Deleted User] Posts: 0
    Forum Member
    On an iphone/ipad it does not show the map but a link 'FIND US ON GOOGLE MAPS', but if i change the browser id to firefox 17 windows it shows the map integrated.

    It does the same with a Nexus 7 browser id.
  • user123456789user123456789 Posts: 16,589
    Forum Member
    ✭✭
    lettice wrote: »
    On an iphone/ipad it does not show the map but a link 'FIND US ON GOOGLE MAPS', but if i change the browser id to firefox 17 windows it shows the map integrated.

    It does the same with a Nexus 7 browser id.

    Great, thanks for testing.
  • JulesandSandJulesandSand Posts: 6,012
    Forum Member
    It displays OK on my HTC One X, the map is shown as a link.
  • user123456789user123456789 Posts: 16,589
    Forum Member
    ✭✭
    It displays OK on my HTC One X, the map is shown as a link.

    Thanks, I also tested on an iPad3 and it looks good.

    I'm glad the change was not too painful, I borrowed the mobile detection php code and that looks to be good :)
  • JulesandSandJulesandSand Posts: 6,012
    Forum Member
    anniebrion wrote: »
    Thanks, I also tested on an iPad3 and it looks good.

    I'm glad the change was not too painful, I borrowed the mobile detection php code and that looks to be good :)

    I've no idea what you just said but I'm glad it's working for you! :p
  • s2ks2k Posts: 7,410
    Forum Member
    Formatting looks alright...wouldnt say the text size was notably large but no real need to zoom and if I do it basically all adjusts. The button images dont show up though, not sure if this was intentional or due to the browser not supporting fancy scripting.

    No map is displayed but there is a text link which prompts to open in one of 3 things.. if I choose maps it shows up as snakey lane.

    Using the standard browser that comes with Android (not Chrome).
  • user123456789user123456789 Posts: 16,589
    Forum Member
    ✭✭
    s2k wrote: »
    Formatting looks alright...wouldnt say the text size was notably large but no real need to zoom and if I do it basically all adjusts. The button images dont show up though, not sure if this was intentional or due to the browser not supporting fancy scripting.

    No map is displayed but there is a text link which prompts to open in one of 3 things.. if I choose maps it shows up as snakey lane.

    Using the standard browser that comes with Android (not Chrome).

    Thanks for testing, the graphics have been removed to minimise bandwidth for people not using wifi. The graphics should appear on desktop browsers as they will mainly have less bandwidth restrictions.

    I changed the text size to 24pt for mobile as on my WP8 the text was very small and hard to read without zooming, desktops get the font at 12pt.
  • flagpoleflagpole Posts: 44,641
    Forum Member
    opera has the ability to show you how it renders in opera mobile.

    most phones adjust the fonts to keep them above a certain minimum level.
  • user123456789user123456789 Posts: 16,589
    Forum Member
    ✭✭
    flagpole wrote: »
    opera has the ability to show you how it renders in opera mobile.

    most phones adjust the fonts to keep them above a certain minimum level.

    I don't have opera installed so cannot test on that, plus opera is changing its engine so I'm not too bothered about testing on opera mobile.

    I found the resizing of fonts by the browser to be hit and miss so decided to turn this off using CSS.
  • flagpoleflagpole Posts: 44,641
    Forum Member
    there is a meta command to disable zooming

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />


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

    but it can be over ridden.
  • user123456789user123456789 Posts: 16,589
    Forum Member
    ✭✭
    flagpole wrote: »
    there is a meta command to disable zooming

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />


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

    but it can be over ridden.

    Thanks, I use:
    text-size-adjust:none;
    -moz-text-size-adjust:none;
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none;
    
  • flagpoleflagpole Posts: 44,641
    Forum Member
    anniebrion wrote: »
    Thanks, I use:
    text-size-adjust:none;
    -moz-text-size-adjust:none;
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none;
    

    it'll works perfectly and looks nice in chrome on my nexus 7. but i can resize it.
  • user123456789user123456789 Posts: 16,589
    Forum Member
    ✭✭
    flagpole wrote: »
    it'll works perfectly and looks nice in chrome on my nexus 7. but i can resize it.

    I don't mind the site being resizeable it was the mobile browsers resizing some of the text but not all that caused a problem.

    Thanks for testing.
  • tealadytealady Posts: 26,262
    Forum Member
    ✭✭✭
    OK on skyfire, but more of a desktop view.
    Do we get a discount?
  • user123456789user123456789 Posts: 16,589
    Forum Member
    ✭✭
    tealady wrote: »
    OK on skyfire, but more of a desktop view.
    Do we get a discount?

    Thanks and no :p
  • Magic CottageMagic Cottage Posts: 2,698
    Forum Member
    ✭✭✭
    All looks fine running Chrome on my ICS smartphone.
  • user123456789user123456789 Posts: 16,589
    Forum Member
    ✭✭
    All looks fine running Chrome on my ICS smartphone.

    Thanks, looks like the mobile device detection ode is OK and the HTML5 compliant coding makes it work as expected on all devices :)
Sign In or Register to comment.