Welcome Guest - Log In | Register | Resend Validation Email | Lost Password
Share On Facebook Share On Twitter Share On Google Plus Share On Pinterest Distant Web on Facebook Distant Web on Twitter Distant Web on GooglePlus Distant Web on YouTube Distant Web on Pinterest RSS Feed For Distant Web
Main Boards => General Discussion => Coding Corner Search Forum
Topic: Quick Mobile Code
  ( Newest Post ) No Posting Permissions
Original Post
Login | Register
to rate
Viewed 137 Time(s)] Scroll To Top Of Page Direct Link to this Post Posted On: 10/2/16 1:29 PM

Male DistantWords

DistantWords
Born: May, 4, 1977 (40)
Group: Admin
Joined: Sep 2, 2013
Last Activity: Nov 17, 2017
Location: Monroe, NC
Forum Posts: 38
Blogs: 8
DistantWords's Website
Facebook Twitter GooglePlus YouTube Pinterest LinkedIn Instagram
New If your site relies on tables, or even if it doesn't but does use DIV tags in a similar way to tables, and you are looking to add a more mobile friendly appearance, this could be a good solution, at least until you have time to do a more thorough job.

In this tutorial (for lack of a better word), I will go through detecting mobile browsers, adding CSS to format the page better for mobile, and using Javascript to kind of top it all off.

The first thing is to detect if the visitor is using a mobile devise. This is best when handled by a server side language like PHP/ASP/ETC. For this example I will use PHP, but it should be possible to convert to another language. Relying on Javascript can be problematic. I'm not saying don't use Javascript, I'm just saying rely on it as little as possible.

So here is a PHP function for attempting to detect mobile browsers. This is easy to update as well, when new text is found:

function is_mobile() {

  $isMobile = false;

  //$op = strtolower($_SERVER['HTTP_X_OPERAMINI_PHONE']);

  $op = "";
  $ua = strtolower($_SERVER['HTTP_USER_AGENT']);
  $ac = strtolower($_SERVER['HTTP_ACCEPT']);
  $ip = $_SERVER['REMOTE_ADDR'];

  $isMobile = strpos($ac, 'application/vnd.wap.xhtml+xml') !== false
	|| $op != ''
	|| strpos($ua, 'android') !== false 
	|| strpos($ua, 'sony') !== false 
	|| strpos($ua, 'symbian') !== false 
	|| strpos($ua, 'nokia') !== false 
	|| strpos($ua, 'samsung') !== false 
	|| strpos($ua, 'mobile') !== false
	|| strpos($ua, 'windows ce') !== false
	|| strpos($ua, 'epoc') !== false
	|| strpos($ua, 'opera mini') !== false
	|| strpos($ua, 'nitro') !== false
	|| strpos($ua, 'j2me') !== false
	|| strpos($ua, 'midp-') !== false
	|| strpos($ua, 'cldc-') !== false
	|| strpos($ua, 'netfront') !== false
	|| strpos($ua, 'mot') !== false
	|| strpos($ua, 'up.browser') !== false
	|| strpos($ua, 'up.link') !== false
	|| strpos($ua, 'audiovox') !== false
	|| strpos($ua, 'blackberry') !== false
	|| strpos($ua, 'ericsson,') !== false
	|| strpos($ua, 'panasonic') !== false
	|| strpos($ua, 'philips') !== false
	|| strpos($ua, 'sanyo') !== false
	|| strpos($ua, 'sharp') !== false
	|| strpos($ua, 'sie-') !== false
	|| strpos($ua, 'portalmmm') !== false
	|| strpos($ua, 'blazer') !== false
	|| strpos($ua, 'avantgo') !== false
	|| strpos($ua, 'danger') !== false
	|| strpos($ua, 'palm') !== false
	|| strpos($ua, 'series60') !== false
	|| strpos($ua, 'palmsource') !== false
	|| strpos($ua, 'pocketpc') !== false
	|| strpos($ua, 'smartphone') !== false
	|| strpos($ua, 'rover') !== false
	|| strpos($ua, 'ipaq') !== false
	|| strpos($ua, 'au-mic,') !== false
	|| strpos($ua, 'alcatel') !== false
	|| strpos($ua, 'ericy') !== false
	|| strpos($ua, 'up.link') !== false
	|| strpos($ua, 'vodafone/') !== false
	|| strpos($ua, 'playstation portable') !== false
	|| strpos($ua, 'wap1.') !== false
	|| strpos($ua, 'wap2.') !== false;

  return $isMobile;

}


(In the above function, something is commented out because at one time it was a variable that did not exist on my server, and to be honest, I have not retried it. It threw and error though, so I commented it out. It may be best to un-comment it and see if it works first.)

So what you want to do is once you have detected a mobile browser, load a mobile specific style sheet (CSS) where ever in your code the style sheets get loaded. Make sure it is last to be loaded though, so that it can over-ride any previously set values where needed.

So that would look something like this:

  if(is_mobile()) {

  echo '  <link rel="stylesheet" type="text/css" href="[path_to_css]/mobile.css" />';    

}


Then here is what you should do in your mobile.css file:

th, td, .mstyle {
  display:block;
  width: 100%;
  text-align:center;
}

body, #body_table {
  max-width: 95%;
}

img {
  max-width:95%;
}

.mgone {
  display:none;
}


.mstyle will be a class to any element you want collapsed and #body_table will be the ID of whatever the main table or DIV element that contains the entire page. This bit of CSS will collapse all tables so that each row will be on it's own line, and not side-by-side.

.mgone is a class you should add to any table rows that you don't need. Like in this forum, the main 'Topics Display' section gives the following information:

Topic Title
Topic Starter
Started On
Views
Replies
Last Posts

As well as images showing if a topic is new, and if a topic is pinned. Most of these are not really needed, especially for mobile viewing, so they can be hidden. So the PHP would look something like this (this is basically sudo-code):

<?php

  $sql = "SELECT [colums] FROM [topic_table] WHERE [needed] ORDER BY [your_choice]"
  $results = database_function($sql);

  echo "<table>";
  echo "  <tr>";
  echo "    <th>Topic Title</th>";
  echo "    <th>Topic Starter</th>";
  echo "    <th>Started On</th>";
  echo "    <th class='mgone'>Views</th>";
  echo "    <th class='mgone'>Replies</th>";
  echo "    <th class='mgone'>Last Posts</th>";
  echo "  </tr>";

  while($rows = database_pull($results)) {

    echo "  <tr>";
    echo "    <td>{$rows['title']}</td>";
    echo "    <td>{$rows['author']}</td>";
    echo "    <td>{$rows['date']}</td>";
    echo "    <td class='mgone'>{$rows['views']}</td>";
    echo "    <td class='mgone'>{$rows['replies']}</td>";
    echo "    <td class='mgone'>{$rows['last_posts']}</td>";
    echo "  </td>";

  }

  echo "</table>";

?>


So with that example above, I added the class 'mgone' to the table rows that, IMO, are not necessary to show on a mobile device. These are rows that are just going to add space that will distract more than help on a mobile device.

Here is an example of what you can do with the class 'mstyle'. It has the same CSS values as all table rows and table headers (TD, TH).

  <label for="username" class="mstyle">Username: <input type="text" name="username" id="username"></label>
  <label for="password" class="mstyle">Password: <input type="text" name="password" id="password"></label>


So in that example, when viewing this login form (I left out the form part because it's not required for this example), if you are on a desktop browser, these forms will be side by side. If you view on a mobile browser, they will be on top of each other, saving screen space.

So somewhere on your page, you need to find a way to let Javascript know that the browser is mobile. I do this with a input field, type 'hidden'. So the PHP looks something like this:

  if(is_mobile()) {

    echo '  <input type="hidden" name="is_mobile" id="is_mobile" value="1" />';

  }


Hopefully you know about Javascript for the rest of this because you need to do it right, and I'm not going to go through the dos and don'ts. So, in your loading section, the section that runs onload (window.onload = initAll;):

  if(document.getElementById("is_mobile")) {

    if(document.getElementById("is_mobile").value == 1) {

      changeMaxWidth();

    }

  }


Now, here is the function for finishing off your page to look better on mobile devices:

function changeMaxWidth() {

  if(window.innerWidth) {

    var aWidth = window.innerWidth * 0.95;
    var fullWidth = window.innerWidth;

  } else {

    var aWidth = screen.width * 0.95;
    var fullWidth = screen.width;

  }

  aWidth = Math.round(aWidth);

  var allImgs = document.getElementsByTagName('IMG');
  for(var i=0; i<allImgs.length; i++) {

    allImgs[i].style.maxWidth = aWidth + "px";

  }

  //CSS

  document.getElementsByTagName("body")[0].style.style.maxWidth = fullWidth + "px";
  document.getElementById("body_table").style.maxWidth = fullWidth + "px";

  window.addEventListener("resize", changeMaxWidth);

  if(screen) {

    screen.addEventListener("resize", changeMaxWidth);

  }

}


Now, all of this will obviously have to be modified to your own site and your own site's styles, but this should be easy to do. Also, any further tweaking (classes, IDs, etc) can be added to the mobile.css file and/or the Javascript function above.

Anyway, this is just a quick run through on a generic way to update a site for a better mobile viewing experience. If you have any questions or suggestions, feel free to let me know!
--------Signature--------
This site is a work in progress. Keep up to date in my Site Notes Topic.
[Viewed 137 Time(s)] Scroll To Top Of Page Direct Link to this Post Posted On: 10/2/16 1:29 PM
  ( Newest Post ) No Posting Permissions
Main Boards => General Discussion => Coding Corner Search Forum
Jump To Forum:
Active Users:
1 active user(s) in the past 15 minutes.
0 guest(s), 0 member(s), 0 anonymous member(s) and 1 bot(s).
Web SpiderCCBot
Past 24 Hours Logins:
1 Member Login(s) for the last 24 hours (0 Anonymously):
DistantWords
Admin | Members | Moderators ( Viewing Via Mobile = Viewing Via Mobile )