Jump to content
awavekidornah

MobileDetect - PHP Help

Recommended Posts

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 by awavekidornah

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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;
	}

}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.