Switch web site to mobile css client side with JQuery - javascript

I am trying to change the display of my web pages depending on the version of the browser and space on screen. I need to completely change the look of the pages as follow:
If the site is displayed on a mobile phone I want the mini version.
If the site is displayed on a desktop browser but the size of the window is too small I want the mini version.
If the site is displayed on a desktop browser and the window can accommodate the full version I want the full version displayed.
If no javascript is available the full version should display.
I just started with some pretty basic code which relies on userAgent:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )
Is there a clean way to achieve what I'm trying to do with JQuery for example?

Use CSS media queries. Sniffing the user agent is not reliable, and will lead to maintenance headaches in the future. Also, using media queries means no javascript is required which is good from a separation of concerns point of view.

Related

How to force desktop browser to use media queries designed for mobile?

I've seen a bunch of stack overflow questions answered that address the problem of showing a desktop version on mobile, but I'm trying to discover how you could force a browser to render a mobile version of a site on desktop.
But is there some equivalent for desktop versions, so that I can 'trick' the browser into using media queries for a smaller device width? Essentially loading the mobile css onto the desktop version.
In essence I'm trying to add a toggle button that when clicked renders my page as though it were mobile. I'm aware you can achieve this affect with chrome tools, but I want to build in that functionality, and am struggling to figure out how to tell the browser to behave as though the viewport were mobile-sized.
Thank you!
if your CSS media queries doesn't work fine on desktop,
you're probably missing
<meta name='viewport' content='width=device-width' />
and if they work fine but you want your website to has same view in both mobile and desktop, then why are you using media queries at all?
remove them and your CSS will work on every size as the same
load the site on your mobile phone, take note of the url. If it has a "/m", for example, "https://www.example.com/m" then include it as such in your desktop browser and the mobile version would be loaded. It works for me.

Hide some parts of Html source codes (src part of 3d models)

My page based on html javascripts and css for view product's models in 3D form on web.
Im trying to hide my <model-viewer part. If you press f12 or right click on page you can easily download my 3d model to your computer. ( src="Assets/m1/makine.glb")
Is it possible to hide some parts (model-viewer part) on source codes with javascript or maybe with other tools for my page ?
Thanks..
My page link > https://unruffled-einstein-e67ebb.netlify.app/urun.html
You simply can't.
Code inspectors are designed for debugging HTML and Javascript. They do so by showing the live DOM object of the web page. That means it reveals HTML code of everything you see on the page, even if they're generated by Javascript. Some inspectors even shows the code inside iframes.
How about some javascript to disable keyboard / mouse interaction...
There are some javascript tricks to disable some keyboard, mouse interaction on the page. But there always are work around to those tricks. For instance, you can use the browser top menu to enable DOM inspector without a problem.
Try these:
Firefox: ☰ > Tools > Web Developer > Inspector
Chrome: ⋮ > More Tools > Developer Tools > Elements
They are outside the control of Javascripts.
Think about this:
Everything on a web page is rendered by the browser, so they are of a lower abstraction level than your Javascripts. They are "guarding all the doors and holding all the keys".
Browsers want web sites to properly work on them or their users would despise them.
As a result, browsers want to expose the lower level ticks of everything to the web developers with tools like code inspectors.
Basically, browsers are god to your Javascript. And they want to grant the web developer super power with code inspectors. Even if your trick works for a while, the browsers would want to undo it in the future.
You're waging war against god and you're doomed to fail.
Consulsion
To put it simple, if you do not want people to get something in their browser, you should never send it to their browser in the first place, or use PHP which can't be seen by visitors.

How can I use JavaScript/JQuery to resize the HTML of my page responsively?

Click here to view my example.
I am attempting to use this code in my simple website to responsively resize the HTML of the page, even as you resize your window.
Is this not possible or am I just making a simple error? The website was designed for 1360x768 (my resolution), however this code makes it look extremely wonky, and no scroll-bar is shown (unsure why).
The code to resize/scale:
function scalePage(){
document.getElementsByTagName("*").each(function(){
var width = ($(this).width() ) / 1360;
var height = ($(this).height()) / 768;
$(this).css("transform", "scale("+width+","+height+")");
$(this).css("-moz-transform", "scale("+width+","+height+")");
$(this).css("-webkit-transform", "scale("+width+","+height+")");
$(this).css("-o-transform", "scale("+width+","+height+")");
});
}
$(document).ready(function() {
scalePage();
});
$(window).resize(function() {
scalePage();
});
Resizing your page using JS is a bad idea from the get go.
Here's why:
What if your user has JS disabled?
What if your user has an older browser that can't render the JS quick enough?
Each time you resize your browser the content must be re-rendered.
Javascript should be used to add features to the site, not create them.
Secondly,
This approach is not 'responsive'. To achieve a responsive layout on your site you should use CSS to control it, As it is much faster than Javascipt/ jQuery.
A good starting point for creating responsive web pages would be this article: 2014 Guide to Responsive Web Design. Any seasoned front-end web developer will tell you that the key to a good responsive website is to develop mobile first. This will ensure that your site will 'scale' nicely.
Thirdly,
I am going to re-iterate my point about javascript being used to add functionality, More and more do i see sites failing when i have javascript disabled or i browse on an older laptop with IE8 installed. (Although there are arguments against supporting IE8 nowadays.)

What should I use for my website mobile version ?jquery mobile / CSS3 page media / detecting browser size by jscript or redirecting to new page?

I have an personal profile website at http://www.kaidul.web44.net/ and I have used jquery, flash & high interactive component in it. But developing a small device version of it is becoming a challenge for me.It's page structure is based on jquery. I am now in fix in what should I approach ?
( jquery mobile / CSS3 page media / detecting browser size by jscript or redirecting to new page or anything else )
You can recommend me about it's structure whether I should modify it or not.
please help me.Thanks in advance.
My opinion is that you should do a redirect to a new page... because.. in the future you might want to modify something and will be difficult.. and another reason.. because is another view... Almost everybody is doing in a subdomain... and if the user want to view the desktop version... even if he is mobile.. redirect him to the large view...

Loading JS script for only iOS devices?

I have a jQuery script I'm using on a site to allow fixed position background images on iPhone/iPad/iPod. However it seems to be clashing with another script I am using on the site that enlarges background images full screen. Luckily they're independent of each other, I don't need the clashing background image script to work on iOS devices and vice versa.
Is there a way I can specifically target IOS devices to serve a JS file? I initially thought about using some kind of IF statement and doing it on window size but that started to get a bit complicated and affects other non-IOS devices. It just needs to run something like this...
..."if IOS device then load scroll.js"
I know device/browser sniffing is frowned upon but I can't think of another way around this problem.
You can use the Mobile Safari user agent string to detect mobile safari server-side, see: How do I detect Mobile Safari server side using PHP?
You can also do this in JavaScript:
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i))
See iPhone & iPod Detection Using JavaScript for more information.
You can use Detect Mobile Browser (it has a library for javascript).
you can also try this
if (navigator.userAgent.match(/like Mac OS X/i)) {
alert('Hi, you\'re browsing from an iOS device.');
}

Categories

Resources