Php if mobile site

PHP — Check if the page run on Mobile or Desktop browser [duplicate]

Solution 1: There is a very nice PHP library for detecting mobile clients here: http://mobiledetect.net Using that it’s quite easy to only display content for a mobile: Solution 2: I used Robert Lee`s answer and it works great! Question: I need to test an html file for mobile responsiveness, but all the resources I have found to do this need a URL or a localhost, is there any way to test responsiveness with just an html file?

PHP — Check if the page run on Mobile or Desktop browser [duplicate]

In my PHP page I should display two different text contents according to whether the page run under mobile or desktop browser. Is there a way to perform this control in PHP?

There is a very nice PHP library for detecting mobile clients here: http://mobiledetect.net

Using that it’s quite easy to only display content for a mobile:

include 'Mobile_Detect.php'; $detect = new Mobile_Detect(); // Check for any mobile device. if ($detect->isMobile()) < // mobile content >else < // other content for desktops >

I used Robert Lee`s answer and it works great! Just writing down the complete function i’m using:

function isMobileDevice() < $aMobileUA = array( '/iphone/i' =>'iPhone', '/ipod/i' => 'iPod', '/ipad/i' => 'iPad', '/android/i' => 'Android', '/blackberry/i' => 'BlackBerry', '/webos/i' => 'Mobile' ); //Return true if Mobile User Agent is detected foreach($aMobileUA as $sMobileKey => $sMobileOS) < if(preg_match($sMobileKey, $_SERVER['HTTP_USER_AGENT']))< return true; >> //Otherwise return false.. return false; > 

You can do it manually if you want.

preg_match('/windows|win32/i', $_SERVER['HTTP_USER_AGENT']) preg_match('/iPhone|iPod|iPad/', $_SERVER['HTTP_USER_AGENT']) 

You can even make it a script

$device = 'Blackberry' preg_match("/$device/", $_SERVER['HTTP_USER_AGENT']) 

Here is somewhat of a small list

 '/windows nt 6.2/i' => 'Windows 8', '/windows nt 6.1/i' => 'Windows 7', '/windows nt 6.0/i' => 'Windows Vista', '/windows nt 5.2/i' => 'Windows Server 2003/XP x64', '/windows nt 5.1/i' => 'Windows XP', '/windows xp/i' => 'Windows XP', '/windows nt 5.0/i' => 'Windows 2000', '/windows me/i' => 'Windows ME', '/win98/i' => 'Windows 98', '/win95/i' => 'Windows 95', '/win16/i' => 'Windows 3.11', '/macintosh|mac os x/i' => 'Mac OS X', '/mac_powerpc/i' => 'Mac OS 9', '/linux/i' => 'Linux', '/ubuntu/i' => 'Ubuntu', '/iphone/i' => 'iPhone', '/ipod/i' => 'iPod', '/ipad/i' => 'iPad', '/android/i' => 'Android', '/blackberry/i' => 'BlackBerry', '/webos/i' => 'Mobile' 

 '/msie/i' => 'Internet Explorer', '/firefox/i' => 'Firefox', '/safari/i' => 'Safari', '/chrome/i' => 'Chrome', '/opera/i' => 'Opera', '/netscape/i' => 'Netscape', '/maxthon/i' => 'Maxthon', '/konqueror/i' => 'Konqueror', '/mobile/i' => 'Handheld Browser' 

I came across it here: http://detectmobilebrowsers.com/ .

Rendering ASP.NET Web Pages (Razor) Sites for Mobile, ASP.NET Web Pages (Razor) 3. This tutorial also works with ASP.NET Web Pages 2. ASP.NET Web Pages lets you create custom displays for rendering …

How To Inspect Element On Your iPhone/iPad Using

Inspect your Mobile Browser on a Desktop PC

This tutorial shows a demonstration of how you can connect your Android Mobile device to a PC and inspect your Chrome Mobile Websites in your Desktop.This is

How to test html file for mobile responsiveness

I need to test an html file for mobile responsiveness, but all the resources I have found to do this need a URL or a localhost, is there any way to test responsiveness with just an html file?

Yes, simply open the .html file with Chrome or Firefox. These browsers have device mode .

You can change the screen size and see how it looks on mobile or tablet sized screens.

If you save your file .html you can open with firefox or chrome, but i suggest you to use firefox developer edition https://www.mozilla.org/it/firefox/developer/

If you use Firefox you can put in the menu -> development -> flexible display (ctrl+shift+m)

In Chrome (ctrl+maiusc+i + emulation)

In this page you can select the device to view.

You have a lot of options to test it, but each option has it’s benefits.

1. You can minimize the browser!
2. You can use device mode from chrome,mozilla etc
3. You can find a lot of online responsive site testers for any resolution you want

In my opinion, the best way to test responsiveness is in Chrome. Right click on the page and inspect. Then there will be a button to turn on responsive testing. You can choose the device to see how your page will render on all kinds of devices. This is better than resizing your window because there are slight differences in how pages render on different tablets and phones.

HTML vs Body: How to Set Width and Height for Full, If you want to use the body element as a smaller container and let the HTML element fill the page, you could set a max-width value on the body. Here’s …

Display different Vuejs components for mobile browsers

I am developing an SPA using Vue 2.0. The components developed so far are for the «desktop» browsers, for example, I have

Main.vue, ProductList.vue, ProductDetail.vue,

I want another set of components for the mobile browsers, such as MainMobile.vue, ProductListMobile.vue, ProductDetailMobile.vue,

My question is, where and how do I make my SPA render the mobile version of components when viewing in a mobile browser?

Please note that I explicitly want to avoid making my components responsive. I want to keep two separate versions of them.

I have simple solution for Vue.js :

I have an idea, use a mixin which detects if the browser is opened on mobile or desktop (example for js code in this answer). then use v-if, for example:

so here is an example on https://jsfiddle.net/Ldku0xec/

I had this same problem, I solved it using a neutral and no layout vue file (Init.vue) that will be accessed by mobile and desktop, and this file redirects to the correct file.

Let’s suppose that I have the Main.vue and the MainMobile.vue. I will add an Init.vue that will redirect. So my router/index.js is that:

import Router from 'vue-router' import Vue from 'vue' import Main from '@/components/Main' import MainMobile from '@/components/MainMobile' import Init from '@/components/Init' Vue.use(Router) export default new Router(< routes: [ < path: '/', name: 'Root', component: Init >, < path: '/Main', name: 'Main', component: Main >, < path: '/MainMobile', name: 'MainMobile', component: MainMobile >, ] >) 

At the Init.vue file, the mobile/desktop detection will happen:

The isMobile() function used is very simple, you can change to any other.

I was looking for a solution for this and came here but I couldn’t find what I needed:

1. Asynchronous imports to only load into the bundle what was needed based on the viewport.
2. Capability to serve a different layout if the layout was resized

I mixed and matched a few things I read online including answers here so I thought I’d just come back and put all my learnings into one function for anyone else looking:

/** * Breakpoint configuration to be in line with element-ui's standards * @type > */ const BREAKPOINTS = < LABELS: ['xs', 'sm', 'md', 'lg', 'xl'], VALUES: [0, 768, 992, 1200, 1920, Infinity] >; /** * @typedef ViewFactory * @type function * A function which returns a promise which resolves to a view. Used to dynamically fetch a view file on the fly during * run time on a need basis */ /** * A helper to get a responsive route factory which renders different views based on the current view point * @param > map - A map of breakpoint key to a ViewFactory * @returns - A view factory which invokes and returns an item supplied in the map based on the current viewport size */ export default function responsiveRoute(map) < return function getResponsiveView() < const screenWidth = document.documentElement.clientWidth; // Find the matching index for the current screen width const matchIndex = BREAKPOINTS.VALUES.findIndex((item, idx) => < if (idx === 0) < return false; >return screenWidth >= BREAKPOINTS.VALUES[idx - 1] && screenWidth < BREAKPOINTS.VALUES[idx]; >) - 1; if (map[BREAKPOINTS.LABELS[matchIndex]]) < // Perfect match, use it return map[BREAKPOINTS.LABELS[matchIndex]](); >else < // Go down the responsive break points list until a match is found let counter = matchIndex; while (counter-- >0) < if (map[BREAKPOINTS.LABELS[counter]]) < return map[BREAKPOINTS.LABELS[counter]](); >> return Promise.reject(< code: 500, info: 'No component matched the breakpoint - probably a configuration error' >); > >; > 

const router = new Router( < mode: 'history', base: process.env.BASE_URL, routes:[< path: '/login', name: 'login', component: responsiveRoute(< // route level code-splitting // this generates a separate chunk (login-xs.[hash].js) for this route // which is lazy-loaded when the route is visited. xs: () =>import(/* webpackChunkName: "login-xs" */ './views/Login/Login-xs.vue'), // sm key is missing, it falls back to xs md: () => import(/* webpackChunkName: "login-md" */ './views/Login/Login-md.vue') // lg, xl keys are missing falls back to md >) >] >); 

Vue Router supports defining the component key as a function which returns a promise to support async routes. The most common way being to use the webpack import() function which returns a promise. The function which returns the promise is only invoked when the route is about to be rendered ensuring we can lazy load our components

The responsiveRoute function accepts a map of these functions with keys set for different breakpoints and returns a function which, when invoked, checks the available viewport size and returns invokes the correct promise factory and return’s the promise returned by it.

I like this method because it does not require the application architecture or route configurations to be in a certain way. It’s pretty plug and play using Vue Router capabilities provided out of the box. It also does not force you to define a view for every breakpoint-route combination. You can define a route as usual without this(lazy loaded or not) along side other routes that use this without any problems.

This method does not use User Agent sniffing but uses the available width of the document.documentElement instead. Other methods I saw recommended things like window.screen.width which gives the exact device screen size regardless of the window size or a more robust window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth . Mix and match as needed.

My break points are (number and their values) are based on element-ui breakpoints as I used that for normal responsive design. This can again be configured as needed by changing the constants at the top

How can I inspect element in an Android browser?, Finally on your Android: call the site you want to inspect (the one with the script inside) and see how it appears as «Target» in your local browser. Now …

Источник

The simple way to Detect Mobile Device in PHP

You may need to detect a mobile device on a PHP based website in the project.

You may see many websites having a desktop version and also a simplified mobile version of the same website to make it simpler for mobile internet users. But to do it you must have to detect a mobile device.

Detecting a mobile device from the server side is the best as it will not load unnecessary content and really make a website faster by loading only the content that you want to show on mobile device.

Although you can use CSS media query, it will not prevent mobile devices from loading content that you want only for computers or desktop.

So the best way of detecting a mobile device from the server side. You can do it using PHP. In this tutorial, I am going to show you a simple PHP code snippet which will easily detect if the visitors on your site is using a mobile device.

PHP code snippet to detect mobile device

Belo is the simple PHP code that can be used to detect a mobile device:

How to use the above PHP code snippet?

After you place the above code you can use it like the below code:

Below is the complete code which you can test on mobile and desktop:

Now test the above code. If you test it with your mobile device then you will see the “It is a mobile device” text. And when you test it with your PC or desktop, you will see “It is desktop or computer device” text.

So how was that? Is it not so amazing and easy way of detecting a mobile device and apply if-else conditional statement?

Now if you able to detect the mobile device in PHP, then you can also detect desktop just using the if else statement again. In the above code what you can see in else part is for a desktop device.

Источник