MobileDetect - PHP Help

[awavekidornah]

Hi phpfreaks! I am trying to add a code to my site that shows extra content that I would like only mobile device users to be able to see it.

 

These are the sites: http://demo.mobiledetect.net/ https://github.com/serbanghita/mobile-detect

 

If anyone knows how to go about this, I would really appreciate it if you can help me.

 

Edit: There's more information here: http://www.betterhostreview.com/wp-mobile-detect-wordpress-plugin-hide-content-mobile.html

 

However, none of my sites are affiliated with WordPress. I don't plan on using Wordpress either. I would like to know how to take the plugin code for mobiledetect or whatever and somehow use it on my sites that I edit using Dreamweaver. BTW: I barely know any PHP coding - all of my sites are coded in HTML. If anybody knows how I can do this and show extra content like a side-note to only mobile device users and not desktop users, I would greatly appreciate the help.

 

Thanks!

Edited September 4, 2015 by awavekidornah

[denno020]

You could use CSS to get the same functionality.

 

Add the mobile only content to a div, give it a class, and then in your stylesheet, set display: none; on that div, with a style directly after inside a media query, that will set display: inline;

 

Example

 

.mobileOnly {
  display: none;
}
@media (max-width: 300px) {
  .mobileOnly {
    display: inline;
  }
}

 

Set the max width to your desired "mobie only" size.

 

Denno

[QuickOldCar]

As denno stated media queries can do it.

 

In the head area of html use these 3 lines

<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link href="/style.css" rel="stylesheet" type="text/css">
<link href="/media-queries.css" rel="stylesheet" type="text/css">

First line sets the initial size

Second line includes your default stylesheet

Third line will be your adjustments for same named dividers and classes as you use in your main stylesheet.

 

Here is an example I use that moves my sidebar to below the main content area and some other adjustments.

You will find out using css versus images and % versus fixed sizes makes it a lot simpler to do.

 

media-queries.css

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {

	/* pagewrap */
	#pagewrap {
		width: 95%;
	}

	/* content */
	#content {
		width: 60%;
		padding: 3% 4%;
	}

	/* sidebar */
	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		width: 100%;
		height: auto;
		min-height: 300px;
	}

}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

	/* header */
	#header {
		height: auto;
	}

	/* search form */
	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
		z-index: 100;
		height: 40px;
	}
	#searchform #s {
		width: 100px;
	}
	#searchform #s:focus {
		width: 150px;
	}

	/* main nav */
	#main-nav {
		position: static;
	}

	/* site logo */
	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	/* site description */
	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	/* content */
	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	/* sidebar */
	#sidebar {
		width: 100%;
		margin: 0;
		float: none;
	}
	#sidebar .widget {
		padding: 3% 4%;
		margin: 0 0 10px;
	}

	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		min-height: 250px;
	}

}

/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {

	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}

	/* main nav */
	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

}

[gizmola]

Strongly agree with the prior respondents.

 

Media queries are current best practice for responsive design, as they are built into css and supported by the browsers. With that said, they aren't focused on determining what device someone is using, but rather the size of the screen.

 

So long as you're not trying to have something silly like: "Hey Iphone6 user...." they are definitely the recommended path at this point, as well as HTML5, Grids, css3 etc..

 

QoC has some good examples.

 

If you do some googling you can find some nice templates that people have created you can use as boilerplate in your css.

 

This is a good one, but there are many others: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints