so i wanted to make my website load differently on desktop and mobile. The code below detects whether its loading on mobile or desktop. Is there any way i can replace the you are using moblie text to a whole new html code so that when the website loads on mobile instead of showing you are using mobile it load a new html website meant for mobile?
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var element = document.getElementById('html');
if (isMobile) {
element.innerHTML = "You are using Mobile";
} else {
element.innerHTML = "You are using Desktop";
}
</script>
to redirect to another html page just use window.location='https://yourmobileurl.com' in your if statement or window.location='https://yourdesktopurl.com' in the else
HOWEVER, a better way to design this is to use media queries
Related
I would like to print a PDF in the browser, which was generated by my ASP.NET Core application. I have already tested countless articles and recommendations, but unfortunately there is no universal solution for all browsers.
Solutions like printing from an iframe doesn't work on iPadOS/iOS - for a document with multiple pages it prints only the first page (and the page is scaled incorrectly). The embed is not working anymore.
Print.js looks like that it is not maintained anymore and the owner has no activity on his account in the last year. Based on the issues on project, there are lot of bugs for mobile devices, which were not fixed anymore.
PDF.js from mozilla is also not working with the legacy version on iPadOS/iOS. Testing with the demo page has shown, that the printing often gets stuck. As mentioned in this ticket, the primary target is Firefox - they will not care much about issues on safari).
The only solution I can think of would be to print on desktop devices using an iframe and display the PDF on mobile devices, leaving it to the user to print it themselves. However, on iPadOS in particular, the default setting is "Request Desktop website" and Safari shows as macOS. So it is not possible to determine from the user agent whether it is an iPadOS.
Has anyone a solution for this?
<html>
<head>
<title>Print PDF using Dynamic iFrame</title>
</head>
<body>
<input type="button" id="bt"
onclick="print('../sample.pdf')"
value="Print PDF" />
</body>
<script>
let print = (doc) => {
let objFra = document.createElement('iframe'); // Create an IFrame.
objFra.style.visibility = 'hidden'; // Hide the frame.
objFra.src = doc; // Set source.
document.body.appendChild(objFra); // Add the frame to the web page.
objFra.contentWindow.focus(); // Set focus.
objFra.contentWindow.print(); // Print it.
}
// Using regular js features.
// function print(doc) {
// var objFra = document.createElement('iframe');
// objFra.style.visibility = 'hidden';
// objFra.src = doc;
// document.body.appendChild(objFra);
// objFra.contentWindow.focus();
// objFra.contentWindow.print();
// }
</script>
</html>
I need help please? I want to make my website that has a desktop and a mobile version. The CSS coding of styling to the correct widths of HTML elements are easy but a URL is harder.
I want to know is that how to make a URL that leads to a home page on desktop but on mobile the URL is different but it goes to the same home page as the desktop version but in the mobile version.
Do you know if there is any code that can do that with out getting any errors on previewing it privately. I don't mind if your answers are using PHP or JavaScript etc.
This is a code that i tried to use. I wasn't sure if it worked or not. Can't say it possibly did.
$(document).ready(function() {
$(window).on("load resize", function() {
if($(window).width() <= 950) {
var mobile = window.location = "/mindex.php";
console.log("The location is " + mobile);
} else if($(window).width() > 950) {
var desktop = window.location = "/index.php";
console.log("The location is " + desktop);
} else {
var defaultPlace = "";
console.log("Defualt location: " + defaultPlace);
}
});
});
Can you please help me? Remember, I would like some help on making a mobile redirect URL and a desktop URL but that will both lead to the same page but in different versions please.
You can use user-agent header sent by the browser to check whether the user is mobile user or desktop user and redirect according to the returned value. You can check user-agent header using this -
var usrAgent = navigator.userAgent;
Now you know the user agent, check the returned user-agent is mobile or not and redirect accordingly -
function detectMobile()
{
if(usrAgent.match(/Mobile/i))
{
return "Mobile";
}
}
var isMobile = detectMobile();
if(isMobile)
{
window.location = "MOBILE_URL";
}
else
{
window.location = "DESKTOP_URL";
}
Alternatively,
You can use html link tag to redirect to any webpage according to user device width using this -
<link rel="alternate" media="only screen and (max-width: 640px*)" href="MOBILE_URL_TO_REDIRECT">
*Change this width according to your requirement. 640px is the ideal max width for mobile devices.
I hope this solves your problem.
I have a dynamically generated div with certain class. I used .print() to get generated tables and lists inside that div to show nicely for printing on windows. However, this doesn't work on ipad nor on android.
Is there a better way to export generated div content onto pdf or some other way that will be displayed on windows and mobile?
_printThis: function (){
var text = $(".divClass")[0].outerHTML;
var popup = window.open("", "popup");
popup.document.body.innerHTML = text;
popup.focus(); //required for IE
if($(".divClass")){
$(".divClass").remove();
}
popup.print();
popup.close();
}
i looked at jsPDF but it cuts off my content and doesn't support CSS :(
I'm working a wordpress website that needs a mobile redirect to the mobile home page in case the user is using a cell. I'm trying to utilize this Javascript code but I'm having major difficulties getting it to work properly.
I need help removing the conformation section that asks the user if they want to continue to mobile site.
I also need help figuring out how to restructure the code so it doesn't keep forwarding mobile user to home page. For example, I load the page on mobile, the code runs and it forwards me to mobile page. From there I click on another link in the top navigation and it takes me back to the home page no matter what I do.
Keep in mind I am very new to this so any Input and Help from you experienced folks out there would be much appreciated.
Thank You
P.
<script type="text/javascript">
if (screen.width < 1081) {
var ref = document.referrer;
var urls = new Array("http://www.mymainsite.com","http://m.mymobilesite.com");
var n = ref.match(urls[0]);
var m = ref.match(urls[1]);
if ((m!==null) || (n!==null)) {
stop;
}
else if (ref=='') {
var r = confirm("Small Display is Detected.\nClick \"OK\" for MOBILE SITE.");
if (r==true) {
window.location = "http://m.mymobilesite.com";
}
else {
stop ;
}
}
else
{
window.location = "http://m.mymobilesite.com";
}
}
</script>
We only activate this code on your main site. Then we check whether or not your screen width is small enough and look into localStorage to see whether or not the user has made a decision before. Then we put up the confirmation box. If the user clicks okay, we go to the mobile site, if not we set the localStorage variable to true. Keep in mind that localStorage is only available IE8+
if(location.hostname === 'mymainsite'){
if (screen.width < 1081 && !localStorage.isMainSite) {
if(confirm('Small Display is Detected.\nClick \"OK\" for MOBILE SITE.')){
window.location = "http://m.mymobilesite.com";
} else {
localStorage.isMainSite = true;
}
}
}
I've recently created a separate mobile skin for a website. The site serves the mobile version of a page based on the screen size of the device it is being viewed on using the following code.
<script type="text/javascript">
if (screen.width <= 600) {
window.location = "mobile/";
}
</script>
I'd now like to add a "view desktop version" link at the bottom of the page. Naturally, with the above code in the header of each page, it just detects the screen size again and loops back.
Could someone please suggest how I could get around this. I suspect this will be a session or a cookie but I'm very new to java and don't know how to set these up.
thanks in advance for any advice.
This should be handled by the viewport in the metatag of your website. The use of jquery can allow users to opt out of responsive design:
var targetWidth = 980;
$('#view-full').bind('click', function(){
$('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
});
See this link for more clarification.
To detect if link was clicked you can:
Add a specific query parameter (like ?forceDesktop=true) which should be removed if returned to mobile
Use media queries and single skin (see bootstrap)
Maybe look for more elaborate version to detect mobile (link)
Chrome for Android has option to request desktop site (How to request desktop
I've managed to come up with another solution using local storage which is really simple for a beginner like me. It's probably an amateurish way of doing things but it certainly works for my purposes.
So updated the code on the desktop version of the site to:
var GetDesk = 0;
var GetDesk = localStorage.getItem('GetDesk');
//check screen size is less than 600
if (screen.width <= 600) {
//check if there's anything in local storage showing the users requested the desktop
if (GetDesk == 0 ) {
window.location = "/mobile.html";
}
}
then added code to the mobile version of the site to check if the user has previously requested the desktop version:
var GetDesk = localStorage.getItem('GetDesk');
if (GetDesk == 1 ) {
window.location = "/desktop.html";
}
Then at the bottom of the mobile version added the button:
<!-- onclick set the value of GetDesk to 1 and redirect user to desktop site -->
<button onclick="localStorage.setItem('GetDesk','1'); window.location.href = '/desktop.html';">View desktop</button>
As I say, perhaps not the best way but it certainly works and is easy for beginners.