determination of mobile options defined in floatbox

Page: 1

Author Post
Registered: Sep 2016
Posts: 3
The comments in the code state "This mobile section assigns overrides to be applied to small-screened mobile devices only." What are you defining as a small screened device? How is the determination being made that it's a mobile device? Media queries? Feature detection? Something else? or a combination?

Also, what are the pixel limits here, for width and/or height of the determined mobile device?

Registered: Aug 2008
Posts: 3381
Measuring screen size using javascript is unreliable, but the algorithm used in Floatbox is probably the best one around and captures a large majority of small-screened devices. As the mobile landscape matures and de facto standards and practices come to dominate, the miscalculated outliers are becoming fewer and farther between.

A small-screen in Floatbox's world is anything smaller than 8" diagonal.

Below is the calculation algorithm from the Floatbox source.
// isSmallScreen()
// Boolean, generally true if touch screen is less than 8 inches (result, not function, is on the API)

function isSmallScreen (
screen // var
) {
if ( screen = self.screen ) {
var screenW = screen.width,
screenH = screen.height,
outerW = self.outerWidth;
if (
'ontouchend' in $doc &&
self.devicePixelRatio >= 2 &&
outerW && outerW < screenW // older android reporting dense physical screen pixel count
) {
screenH *= outerW / screenW; // assume proportional and scale to retain the address bar etc. in the measurement
screenW = outerW;
return screenW + screenH < 1777;
// end isSmallScreen

Page: 1