- 0
Mobile Site Development Tips & Tricks
-
Recently Browsing 0 members
- No registered users viewing this page.
-
Similar Content
-
This Registry trick lets you seamlessly upgrade to Windows 10/11 Pro from Home
By hellowalkman,
- microsoft
- windows 11
- (and 6 more)
- 17 replies
- 2 views
-
- 4 replies
- 2 views
-
- 2 replies
- 3 views
-
Crashing to success: What we know and don't know about Starship's third test flight
By Martin Hodás,
- 5 replies
- 4 views
-
Synology BeeStation review: a personal cloud to backup photos from family devices
By Fezmid,
- synology
- beestation
- (and 8 more)
- 4 replies
- 1 view
-
Question
Seahorsepip Veteran
I made this topic to highlight some tips and ideas for mobile website development.
Your free to post your own ideas/input below :D
Some tips/ideas/tricks I know:
[/indent]
[indent=1]Above code adds the [i]'mobile'[/i] class to the [i]'html'[/i] element when you're not on the homepage, as example you're at [u][i]domain.com/something[/i][/u] instead of [u][i]domain.com[/i][/u].[/indent]
[indent=1]Now we can remove elements by using CSS:
html #container {
display: none;
}
.mobile #navigation {
display: none;
}
.mobile #container {
display: block;
}
.mobile #homebutton {
display: block;
}
[/CODE]
[/indent]
[indent=1]You can of course do a lot more as shown at the example above with Media Queries and this piece of JS, use your imagination![/indent]
[indent=1][i][b]2. Iphones[/b][/i][/indent]
[indent=1]These days a lot of people use a iphone, but what for resolution do these have?[/indent]
[indent=1]Most mobile phones are 320x480 and some are 480x640 and some are even 640x960![/indent]
[indent=1]The resolution for the iphone is '320x480' and for the iphone 4(s) '640x960'.[/indent]
[indent=1]So that would mean that we have to design our mobile sites for 640 pixel width screens too?[/indent]
[indent=1]Short answer: no[/indent]
[indent=1]As you have noticed is the iphone4 resolution exactly the 2 times higher then the iphone resolution.[/indent]
[indent=1]But the screen size(inch) is not 2 times bigger, which makes the pixels very small![/indent]
[indent=1]Those super sharp displays in iphone 4's are called [i]'retina'[/i] displays.[/indent]
[indent=1]As a result has apple made the design for the iphone 4 user interface different,[/indent]
[indent=1]as example: borders which were normally 1px width are now wider so they look still as 1px width on the iphone 4 device itself.[/indent]
[indent=1]We can do the same design idea as apple did without making a custom page for the iphone 4.[/indent]
[indent=1]To do this we're going to keep our mobile website just 480px width and add a meta tag to the html header which zooms the page in to 640px width.[/indent]
[indent=1]This will make everything 2 times bigger.[/indent]
[indent=2][i]Keep in mind that css styled elements are suggested for a smooth result at the 2 times zoom in,[/i][/indent]
[indent=2][i]if you use images and want them to stay sharp make sure to use a image 2 times bigger then the img tag width or at a div with a background-image an image 2 times bigger then the div and add 'background-size: div-width div-height;'[/i][/indent]
[indent=1]Now everything is 2 times bigger on the iphone 4 we also got bigger border width's which look smooth on the retina display![/indent]
[indent=1]Heres the meta tag:
[/indent]
[indent=1]So after doing this we can just keep our 480px design and use it on the 640px iphone 4 :D[/indent]
[indent=1][i][b]3. Detect devices trough JS[/b][/i][/indent]
[indent=1]You want to know which device is viewing your webpage?[/indent]
[indent=1]In the following guide will be explained hwo you can see that, as example we will try to make the background of a [i]'#container'[/i] [i]red[/i] when the device is a android device.[/indent]
[indent=1]JS to use:[/indent]
$("html").addClass("android"); /*jQuery*/
}
else if(navigator.userAgent.match(/webOS/i)){
$("html").addClass("webos"); /*jQuery*/
}
else if(navigator.userAgent.match(/iPhone/i)){
$("html").addClass("iphone"); /*jQuery*/
}
else if(navigator.userAgent.match(/iPod/i)){
$("html").addClass("ipod"); /*jQuery*/
}
else if(navigator.userAgent.match(/iPad/i)){
$("html").addClass("ipad"); /*jQuery*/
}
else if(navigator.userAgent.match(/BlackBerry/i)){
$("html").addClass("blackberry"); /*jQuery*/
}[/CODE]
CSS for this example:
background: red;
}[/CODE]
With above code we simply look up the userAgent string to see what device we've got and then
we add a class to the 'html' element so we can use it to style the page for a android device.
Above code can of course also be used in different ways, picking all the apple devices as example:
$("html").addClass("apple"); /*jQuery*/
}[/CODE]
[indent=1]_________________________________________________________________________________________________________________________[/indent]
[indent=1]If you got more suggestions feel free to add them below in the comments, I will try to write some more in next few days ;)[/indent]
Edited by AnaronLink to comment
Share on other sites
5 answers to this question
Recommended Posts