I have a website. It's not responsive now. Normally we can check any responsive website by reduced the browser size if the are made by css3 media query. But I want to make a responsive view for my website. when user will visit the site by their PC, they can see the PC version. if they reduce the browser size, they will not be able to see the Mobile view. They will be able to see the mobile view if they only visit by there Mobile.
for example:
http://www.whatsapp.com
http://www.facebook.com
With php-mobile-detect you can detect a users browser and redirect a mobile to m.whatsapp.com for example. Is this what you are looking for?
Example:
require_once '../Mobile_Detect.php';
$detect = new Mobile_Detect;
if($detect->isMobile() || ($detect->isTablet()){
// Redirect to the mobile version instead of the desktop version
header('Location: m.yoursite.com');
}
Related
I am coding email template(Email marketing).
User can upload html template and select to send mail
I want resize html reponsive on my website like gmail?
How to Resize html element:img,text,table?
view on Gmail with Mobile
View On my website with Mobile
I was having the same issue and in order to fix this I found two approaches:
1) Activating the Request desktop version, under the mobile browser settings:
How to request desktop version of a Web site in Chrome for Android
How to Disable the Mobile Version of a Website on Your iPhone
2) But I just wanted to do this automatically, when my website load in Mobile browser without making the extra steps to set the Request desktop version, and this link provided me the instructions to fix the issue:
Responsive design with “switch to desktop site” option
I have some social sharing links to share a post. This has to be in a new popup/tab/window. You know, the box we all know to share something on FB etc.
For desktop a new tab isn' necessary, so I'm using this:
<a href="popup-example.html" target="popup-example" onClick="javascript:open('', 'popup-example', 'height=400,width=400,resizable=no')">
But now I was asking myself how to make it for mobile devices..
Maybe just a php script to detect if it's desktop, than use example above. If mobile, use <a target="_blank"?
Would this be the right way? Or do I need a mobile hook for the Facebook app for example?
How about trying:
javascript:open('http://domain.com', 'popup-example', 'height='+window.innerheight+',width='+window.innerwidth+'resizable=no')
This would open in a new browser window for desktop (popup) and a seperate tab for mobile?
You can not open a custom sized browser window on mobile devices. So you don't need a special solution to run your code in mobile devices.
Ok, now most mordern smartphone has 720p or 1080p resolution. That mean even screen size is small like 4 in, we still can see all text, gui (such as email textbox) of the whole website when first time opening it in Galaxy s3.
However, though we can see the very little email textbox in mobile browser, it is too small for us to enter data. So we need to magnify the page and that is very time consuming.
So, here is what i am planning to do but i feel it very strange.
I will create a website like a normal website mydomain.com, but the button and text on that website is very big.
Ex:
Css
.myNormalMobileFont{
font-size: 500%;
}
.myNormalLargeFont{
font-size: 700%;
}
The below image shows that no matter where I open my website either in mobile device or in desktop, then it will look like this
One more thing, when I opened some article page in my mobile I saw they have a mobile web version, but I have never found these mobile version on the normal Desktop browser?
Where they put their mobile web?
My mobile website can be used as a normal Desktop website but the the buttons and Text will be very big.
Can someone explain this?
You actually don't need to specify the font-size like that as long as you set the correct meta tags.
ex:
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
This sets the scale of the viewport.
I suggest you upload your HTMLs to a server and access them from your phone and play around with it there. it's the best way to learn
As for your question regarding where you can find the mobile web, it depends on the site.
1) Sometimes the site is responsive (you can access the site from desktop , resize your browser down and watch it change) ie: https://www.foxtel.com.au/got/login.html
2) But sometimes they have dedicated mobile site, like facebook -> https://m.facebook.com/
I've got a html5 website/webapp. I only want people to view this website/webapp from their mobile phone i.e. iphone, android, blackberry.
If they try to visit the website/webapp from their desktop browser, It should display an error message as the website/webapp is only meant for the mobile phone.
Is this possbile? any tips?
Thanks
There's no way to check for sure wether a site is on mobile or desktop. HTML is made to be device agnostic.
you can do browsersniffing BUT
user_agents are easily changed in several browsers
you need to make sure to keep your user agent->mobile/desktop mapping up to date
you could do mediaqueries and conditionally display a query that way, but with the large array of formfactors available today there's no clear line to draw that way either.
Both methods will be prone to misidentification.
Quite Frankly, I'm kinda puzzled why you would want to prevent people from accessing your site. Why do you care if someone accesses your site from a desktop instead of a mobile device?
A site designed for mobile will work on a desktop just fine (it's the other way around that might be problematic)
Grab the script for the language you prefer from here:
http://detectmobilebrowsers.com/
Works for me.
You could use media queries, on the page and check the device width on which the page is width. Say if the page is viewed on Desktop, You can show a Message that this App is compatible with Mobiles Devices only and Not Desktops. similarly this should apply for tablets as well and this message can be customized.
Are you using any serer side technologies (ASP.NET, PHP) to generate the page? If so, you can perform your logic on the server side and return different content (like your message) on the desktop requests.
This is usually done by reading the user-agent. Are you ok with a desktop user over-riding their user agent to simulate a mobile browser and viewing the mobile content?
How to restrict browser view to Landscape on a mobile browser in HTML5? On potrait view, it should display "Switch to landscape mode" and load when it is turned to landscape mode.
you can use the "onorientationchange" event of your browser. I extracted a working example from one of my testing projects: http://jsfiddle.net/r9b8D/
Its not exactly what you are looking for, but it shows the implementation of "onorientationchange". Copy the jsfiddle example to your host and navigate to the site with your mobile phone to see what happens - Maybe you can navigate to jsfiddle with your phone, i am not sure.
Feel free to modify the example to fit your needs.