So I'm working on the mobile version of a site I'm doing, and
so far, I'm pulling the mobile sites content from its main counterpart, the main site.
As I study some mobile sites out there, I notice a lot of em have a "view full site" link.
Now I plan on redirecting the mobile visitors via .js in the header tag on main site via a check for screen width etc...(not sure if its the best way but so far the easiest on my brain))(but suggestions also welcome)
but something like this
if (screen.width<=XyZ||screen.height<=XyZ) //example iphone size lets say 320x480
window.location.replace("mobile site link here.")
Again I dont know if this is the best way but, on dummy tests, it works on iPhone, some friends Droids, and one Blackberry. But it works.
Anyways, so my question is, if i do this check on every page...how can I possible have a "view full site" option?
Use PHP to detect mobile users through $_SERVER['HTTP_USER_AGENT'].
JavaScript detection may not be reliable, because many mobile browsers do not support JS.
A "View Full Site" will set a cookie to reject mobile site, which is detectable.
Use cookies to keep track of your user's preferences.
In skeleton
<?php
if (isset($_COOKIE['nomobile'])) {
$style = "normal";
} else {
if (preg_match('/iPhone|(...etc...)/', $_SERVER['HTTP_USER_AGENT'])) {
$style = "mobile";
} else {
$style = "normal";
}
}
For the "View Full Site" page:
Full Site
fullsite.php
<?php
setcookie('nomobile', 'true');
header('Location: index.php');
?>
First, go to the following URL and download the mobile_detect.php file:
http://code.google.com/p/php-mobile-detect/
Next, follow the instructions on the page, and upload the mobile_detect.php to your root directory,
Insert the following code on your index or home page:
<?php
#include("Mobile_Detect.php");
$detect = new Mobile_Detect();
if ($detect->isMobile() && isset($_COOKIE['mobile']))
{
$detect = "false";
}
elseif ($detect->isMobile())
{
header("Location:http://www.yourmobiledirectory.com");
}
?>
You will notice that the above code is checking for a cookie called "mobile", this cookie is set when the mobile device is redirected to the mobile page. To set the cookie insert the following code on your mobile landing page:
<?php
setcookie("mobile","m", time()+3600, "/");
?>
View the full article at: http://www.squidoo.com/php-mobile-redirect
It's not a best way, because very often JS aren't supported by mobile browsers.
You can use this function:
function its_mobile_browser($user_agent = '')
{
if (empty($user_agent))
{
$user_agent = $_SERVER['HTTP_USER_AGENT'];
if (empty($user_agent)) return false;
}
if (stripos($user_agent, 'Explorer')!==false ||
stripos($user_agent, 'Windows')!==false ||
stripos($user_agent, 'Win NT')!==false ||
stripos($user_agent, 'FireFox')!==false ||
stripos($user_agent, 'linux')!==false ||
stripos($user_agent, 'unix')!==false ||
stripos($user_agent, 'Macintosh')!==false
)
{
if (!(stripos($user_agent, 'Opera Mini')!==false
|| stripos($user_agent, 'WAP')!==false
|| stripos($user_agent, 'Mobile')!==false
|| stripos($user_agent, 'Symbian')!==false
|| stripos($user_agent, 'NetFront')!==false
|| stripos($user_agent, ' PPC')!==false
|| stripos($user_agent, 'iPhone')!==false
|| stripos($user_agent, 'Android')!==false
|| stripos($user_agent, 'Nokia')!==false
|| stripos($user_agent, 'Samsung')!==false
|| stripos($user_agent, 'SonyEricsson')!==false
|| stripos($user_agent, 'LG')!==false
|| stripos($user_agent, 'Obigo')!==false
|| stripos($user_agent, 'SEC-SGHX')!==false
|| stripos($user_agent, 'Fly')!==false
|| stripos($user_agent, 'MOT-')!==false
|| stripos($user_agent, 'Motorola')!==false
)
) return false;
}
return true;
}
Or something better, lol :)
You can add a query string parameter to your website address such as ?fullsite=true and include the following in your if condition >
var fullsite = getQueryString()["fullsite"];
if (fullsite != "true" && (screen.height <= xyz || screen.width <= abc)) //now redirect
You'll need the following function access query string. I took it from here > JavaScript query string
function getQueryString() {
var result = {}, queryString = location.search.substring(1),
re = /([^&=]+)=([^&]*)/g, m;
while (m = re.exec(queryString)) {
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
return result;
}
And in the link you can have >
Show me Full Site
===========
Saying that please take a look at CSS Media Queries. It may require changing a bit of your design architecture but it's pretty useful.
Server-side detection is definitely the way to do this, as you have no guarantee of JS being available or even turned on. A great PHP script for mobile detection is found here http://detectmobilebrowsers.mobi/ and it gets a lot of use around the web.
Related
I was using this code to redirect mobile users to my mobile site
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
$uachar = "/(nokia|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|mobile)/i";
if(($ua == '' || preg_match($uachar, $ua))&& !strpos(strtolower($_SERVER['REQUEST_URI']),'wap'))
{
$Loaction = 'mobile/';
if (!empty($Loaction))
{
ecs_header("Location: $Loaction\n");
exit;
}
}
domain.com/mobile
Recently i have moved my server to a cloud server with PHP 7 now the issue i have started facing is when the site is accessed by mobile there is this endless loop like this
domain.com/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/mobile/
Can someone please help me or point me in the right direction
Thanks
You must also check that the $_SERVER['REQUEST_URI'] doesn't start with /mobile. For example:
if (($ua == '' || preg_match($uachar, $ua)) &&
strpos($requestUri, '/wap') === false &&
strpos($requestUri, '/mobile') === false
) {
$location = 'mobile/';
header("Location: $location");
exit;
}
I am running an argument based on urls to determine whether a user can access that area or not of the site. Is there a better way to instead of listing our every url just say anything after / cant be access. Here is my code it will better explain the problem:
if( $siteUrl == '/shop-portal/' && $userRole == 'customer'){
header('Location: http://mywebsite.co.uk/');
} elseif( $siteUrl == '/product-category/...' && $userRole == 'customer'){
header('Location: http://mywebsite.co.uk/');
}
so where I have /product-category/ isa there a way instead of writing out '/product-category/category1 etc etc every time can I just create one argument? Like anything after '/product-category/...' gets redirected?
I figured it out, here if any one else needs to see it:
if(strpos($siteUrl, 'shop-portal') !== false && $userRole == 'customer'){
header('Location: http://mywebsite.co.uk/');
} elseif(strpos($siteUrl, 'product-category') !== false && $userRole == 'customer'){
header('Location: http://mywebsite.co.uk/');
}
I changed up the query to check if the string exists in the url!
I seem to be having problems with a PHP script which seems to have some intermittent problems.
Im hoping you can help. The php script is simply used to provide users with different stylesheets dependant on their HTTP agent. (I know this is not responsive mobile design)
This work is for a corporate project therefore unfortunately I cant share any links...
The problem I seem to be having is often this script fails to execute and the user is not directed to appropriate stylesheet. This can be simulated by visiting the page and hitting refresh... When the error occurs and I directly visit the PHP script I am simply provided with the code snippet. When the script is working and I do the same I am directed straight to the appropriate CSS file as expected.
Why could this be? Is this a server side problem or is there something wrong with my implementation?
<?php
// MOBILE
$blackberry = strpos($_SERVER['HTTP_USER_AGENT'],"BB10");
$blackberry2 = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
$chrome = strpos($_SERVER['HTTP_USER_AGENT'],"Chrome");
$safari = strpos($_SERVER['HTTP_USER_AGENT'],"Safari");
// REDIRECTS
// MOBILE
if ($blackberry == true)
{
header('Location: style.css');
}
else if ($blackberry2 == true)
{
header('Location: bb7.css');
}
else if ($iphone == true)
{
header('Location: style.css');
}
else if ($ipad == true)
{
header('Location: ipad.css');
}
else if ($chrome == true)
{
header('Location: style.css');
}
else if ($safari == true)
{
header('Location: style.css');
}
?>
HTML Code...
<!--Dynamic CSS Scripts-->
<link rel="stylesheet" href="css.php">
<!--END-->
Thanks!
i created a nice code in jquery,
it checks for pixels on screen and will soon redirect to the appropiate version
but i got to the point where i needed to support the disabled javascript
and i got stuck at
"how am i going to check if javascript is disabled in javascript?" silly right
so what am i supposed to do to run checks i heard of the viewport but i dont know if it can actually redirect to the index
var w = $(this).width();
var h = $(this).height();
if (w > 310 && w > 190 && h > 310)
{
alert('Tiny basic html Version <310x<310');
}
else if (w > 310 && w <= 800 && h > 480 && h < 1800)
{// only if its not a desktop like windows or mac or linux or any other mature browser
//only mobile detection here and other stuff
alert('SmartPhone Version <800x>480');
}
if (w > 800 && w < 3500 && h < 3000)
{//if its mobile os redirect to the smarphone version no matter how big that tablet is unless option
alert('Large Desktop with OS detection');
}
You can do a redirect to a mobile page
<script type="text/javascript">
<!--
if (screen.width <= 700) {
document.location = "/mobile";
}
//-->
</script>
But then, if JavaScript is disabled you can use css to re size and reshape the site, depending on the screen size
#media screen and (max-width:800px) {
// then put your mobile css in here
}
Same thing, but specific to a screen ratio (iphone 5)
#media screen and (device-aspect-ratio: 40/71)
{
}
more info here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
For #media screen it literally changes the page if you re size it there on the spot, you can remove columns or move them underneath others for every different size
or if you really want to, use php for specific devices
<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
// ect ect....
if ($iphone || $android || $palmpre || $ipod || $berry == true)
{
header('Location: http://mobile.site.com/');
//OR
echo "<script>window.location='http://mobile.site.com'</script>";
}
?>
I need to detect if somebody is using a mobile browser (media queries aren't enough in this situation) via php and then load a mobile.css file to override a few lines of css due to lack of proper support for some code I'm using. I'm building a joomla template, so I need it to dynamically generate the path to the css file. So, am I doing this right? Example:
<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
if ($iphone || $android || $palmpre || $ipod || $berry == true)
{
echo "<link rel="stylesheet" href="$this->baseurl/templates/$this->template/css/mobile.css" type="text/css">";
}
?>
In Joomla there's mobile detection built in.
If you are using Joomla 3.0, you may use:
<?php
$templateUrl = $this->baseurl . '/templates/' . $this->template;
$doc = JFactory::getDocument();
$appWeb = new JApplicationWeb; // new JWebClient; (in Joomla 2.5)
if ($appWeb->client->mobile)
{
$doc->addStyleSheet($templateUrl . '/css/mobile.css');
}
?>
in Joomla 2.5 or lower you'd use $appWeb = new JWebClient
in Joomla 3.4 you'll probably use if (JFactory::getApplication()->client->mobile)
I didn't find documentation page, but you may always inspect source code
By the way, check out responsive frameworks. It takes time to learn but it's worth to.
There are libraries available like Mobile_Detect you can use them to detect which channel you are using either desktop, mobile or tablet and can load css accordingly. You can find the download link here
Follow this steps:
1 Download the Mobile_detect file from the above link.
2 Put the file in some folder of your project
3 Now include that file in the page where you want to check if the channel is mobile or desktop. i.e
include mobile_detect.php (something like this)
4) Then once you include the above file do this
$this->detect = new Mobile_Detect;
$channel = 'desktop';
if ($this->detect->isTablet() || 't' == $_REQUEST['device']) {
$channel = 'tablet';
} elseif ($this->detect->isMobile() || 'm' == $_REQUEST['device']) {
$channel = 'mobile';
}
So your $channel variable will have the channel, with this variable you can check if $channel is not equal to desktop then it will be mobile. And you can load mobile.css accordingly. Hope it helps.
As you made clear in your comments that you wish to use your own approach please note that your if statement and the echo is problematic:
As stated in the docs, strpos returns an integer or FALSE so your soft boolean comparison with == would not work since a result of integer 0 is a positive match but gets implicitily converted to FALSE.
Also your echo is not escaped; I'd encourage you to use single quotation marks to reduce the risk of missing escaping. An updated code addressing those issues would be like:
// ... $iphone = strpos(... etc
if($iphone !== false || $android !== false || $palmpre !== false || $ipod !== false || $berry !== false)
{
echo('<link rel="stylesheet" href="' . $this->baseurl . '/templates/' . $this->template . '/css/mobile.css" type="text/css">');
}