Force site to load mobile rather than desktop - javascript

I'm using a JS library (Pannellum) that enables use of the motion sensors available in Apple devices, but when I view my site on a large iPad (12.9-inch) it defaults to the desktop site and makes the library think the sensors aren't available. If you 'Request mobile site' in Safari's settings then it will work, but I'm trying to work out how to make it load the mobile site by default. FWIW I don't have a separate mobile endpoint, it's just a static site using Bootstrap to determine CSS changes at various breakpoints. I'm sure the solution will likely be some missing value in the tag, but I haven't been able to find out what, most existing questions of this nature seem to ask how to do the opposite (force desktop view). Would appreciate it if anyone could point me in the right direction!

Related

Safari much slower than other browsers

I am trying to build a Wordpress website using a theme I purchased, unfortunately the maker of the theme doesn't seem to respond to any support requests.
After creating a few pages I noticed that performance is much worse on Safari compared to any other browser. I tested this on a few computers and few versions of macOS.
Example page is https://sochacki.info/proj/nepal-manaslu-circuit/
I realise that photos on the website are quite big (4000px each), but that is exactly what I want. I am happy with how quickly the pages load and how the galleries work, in Chrome, Firefox or Opera. When you click on a picture it loads PhotoSwipe JavaScript gallery so you can see them in full size, and then you can also click in top right corner to go full screen as well, or to leave the PhotoSwipe viewer. Switching between photos, going full screen or leaving PhotoSwipe are instant.
However when I load the same page in Safari, any action after clicking on a photo is slow. Switching between photos, going full screen, leaving full screen. It all takes a second or a few seconds. I can also see in Activity Monitor that CPU is used way more in Safari.
I tried a couple of things:
the theme I am using uses a custom plugin made by the same author to create these galleries, place photos and it includes PhotoSwipe files inside. Those files were one version behind (4.1.2 instead of latest 4.1.3) so I updated them, but the performance issues are the same.
I installed some other gallery plugins which use PhotoSwipe to display photos, and they did not have the performance issues, so I am not blaming it on PhotoSwipe, probably some other part of the plugin is causing the issues.
I have no real experience with JS or web development, are there any tools that could help me find what is causing the slow performance?
I checked the website speed - as I can see the Theme-Loading-time is okay. But as you already mentioned the Photo-sizes are really unfortunate as we can see in google page insights (https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fsochacki.info%2Fproj%2Fnepal-manaslu-circuit%2F)
Try to resize the Photo-sizes in normal view (not the HeightxWidth > the kB)

Responsive Design Mode on desktop does not behave the same on the actual device

I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?
I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.

Site not loading properly on mobile

I am having issues trying to load my site, http://www.internhacks.io/, on any mobile browser.
The project can be found here on Github.
I have tested the site on mobile using Chrome dev tools, and everything loads fine/acts responsively.
However, when testing the site on my actual phone, sometimes the site does not load at all, sometimes only partially.
Note: the apply button is not meant to do anything yet
I think it may have to do with having a large image as the background. Should I be serving a smaller version if detecting the window is smaller? The img height is set to 100vh.
If anyone knows what might be causing this, or knows of a better way to debug the site on mobile than in Chrome dev tools, please let me know!
I use Opera mini to test mobile devices (aka android) with various screen resolutions.
"height is set to 100vh" huh? never saw that one before. To fit graphics within space available, avoid fixed sizes (aka 100px) and I use relative width:xx%
YES, it's wasteful to send large graphics to a mobile device and from the server, you need to send some xxx-low-res.img instead
it's helpful to load JS scripts into a section to allow all objects to be loaded first.
I think your main issues is that the big images should use smaller, light-weight pictures instead since it'll speed up the resize process when rendering on the phone. Other than that, you want to stick away from, as #jobeard mentioned, from using fixed sizes like the 100vh and use a relative width such as 10%.

How to display web content correctly even if the browser is not maximized?

My problem is that my web site's content (design) "breaks" when it's not maximized ...
I want it to be like most of the others web sites (e.g. facebook) ...
So when the site is not maximized, that the design don't fall apart, but instead it stay "static" no matter how much I change the height/width of the browser manually.
Does anyone have an idea (I'm looking for some code :D) ?
Regards,
You might want to look into a css framework like bootstrap. If you follow their styles you get a lot of responsive resize features for free.
http://getbootstrap.com/

New method for getting device type for mobile webpages

I've been researching for a good way to get the devicetype to trigger mobile websites and many people still use script that gets the screen width/height in pixels to determine if mobile devices are used or not.
But mobile phones/tablets have extremely high resolution screens so we need to get another way to trigger a switch between normal websites and mobile websites.
Screen sizes are around 1,280 x 768 - 1920x1080 for mobile phones and 1920x1080 to 2560x1600 for tablets.
What is the correct error-proof method to determine mobile or not?
I'd like not to use javascript over php, if there's an easier method then javascript please tell!
you can make the mobile website responsive trough Media Queries in your CSS
It will overwrite your normal CSS for the website. Media Queries will check for resolutions and what you put in the media query will be shown like that in a resolution like that
http://webdesignerwall.com/tutorials/css3-media-queries
With Javascript you can do check the browser with the code I found on this page:
http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/
with that code you can redirect to a website specially designed for mobile website

Categories