• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Implemented Mobile Style

hcmagix

Active member
#1
Is there planing xF for Browsers in mobile Devices like IPB?

My dream is xF recognizes the the resolution of the client browser are under fe 600*400 and change automatically in a special Style for mobile device browsers like iphon, ipad, RIM etc.

When the user back on pc the normal style should be loaded.
 

hcmagix

Active member
#3
ooops than sorry for duplicate suggestion.

Before I posted I have searched for Mobile Device and nothing found ;(
 

welshstew

Active member
#7
Yeah a mobile style with automatic useragent detection would be great
You don't need to do that - you can do it easily with CSS:
Code:
@media all and (max-device-width: 767px), all and (max-width: 449px) {
.someSexyStyling {blah}
}
 

Biker

Well-known member
#8
You don't need to do that - you can do it easily with CSS:
Code:
@media all and (max-device-width: 767px), all and (max-width: 449px) {
.someSexyStyling {blah}
}
No.. That applies it to all devices. What is being suggested is a method to detect the device, and then display a unique style assigned specifically for that device. This allows you to have multiple styles that can be assigned depending on the device used.
 

welshstew

Active member
#9
No.. That applies it to all devices. What is being suggested is a method to detect the device, and then display a unique style assigned specifically for that device. This allows you to have multiple styles that can be assigned depending on the device used.
erm, that applies it to all devices with a max device width of 767px and max width of 449px...

you can also define styles for orientation:

Code:
@media (min-device-width:1024px) and (max-width:989px),
       screen and (max-device-width:480px),
             (max-device-width:480px) and (orientation:landscape),
       (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {
.blah{blah}

}
 

Mikey

Well-known member
#10
yes, but they are talking about PHP - useragent detected, so

PHP:
$useragent = "some fancy regex here"
if $useragent = ie6 {
echo "get a better browser"
} elseif $useragent = operamini {
echo "Oh hi, you're on a mobile!"
} else {
echo "style here"
}
 

Cezz

Well-known member
#12
But doing it that way means that I have to keep the useragent list up to date.

Targetting via CSS means that I have to code once for all devices.
Your CSS targetting though would only work for iPhone... UserAgent targetting would work for various different phone models with various different screen resolutions...
 

welshstew

Active member
#13
Your CSS targetting though would only work for iPhone... UserAgent targetting would work for various different phone models with various different screen resolutions...
It works for any modern browser, the orientation stuff is just for advanced fun ;)

Maybe my examples are a bit too extreme (not meant to be derogitory).

Code:
@media screen and (max-device-width: 480px) {
    /* mobile declarations */
}
 

Biker

Well-known member
#16
It works for any modern browser, the orientation stuff is just for advanced fun ;)
The thing to remember is not everyone has the latest and greatest smartphone, yet still want a mobile solution to quickly read and reply to posts. This is why useragent detection is critical if one is going to provide a good solution to their membership.
 

hcmagix

Active member
#17
Hm perhaps in usercp can be an option for "I you use mobile Devices? Give OK for detection ?"

Im not a coder, in my speach can xF follow do:

User give OK in UserCP
User connect via mobile Device
xF check ist an little browser
xF change for this session in style for mobile Device with show threads, postings, conversations
xF mobile Style should not changeable for users

is that possible?
 
#18
+1 for mobile browsing. I do a lot of reading on my iPhone, it would be nice if we have a lighter mobile skin thats esier to navigate.
 

Forsaken

Well-known member
#19
As Kier mentioned he has already begun to start thinking of a mobile skin, I thought I'd offer a few features I'd like to see.

  • The ability to change contrast
This is more because some people either prefer to use black on white, or to use white on black. This is a feature I sorely miss when I'm traveling due to work, because I am usually limited to my cell phone when I have to go to conferences. The ability to choose a white on black solution would really help me when I'm going to be staring at my mobiles screen for several hours at a time.​
  • The ability to increase of decrease text size
Often when browsing sites with my mobile, I'll either get really large text, or super small text, where I need to either zoom or squint to see what is said. Providing the ability to increase text size by increments in the mobile skin would be an amazing feature.​

This is all I can think of for now, but I'll probably update as I can think of things (Need to head to work).