I've finish working with template build with Bootstrap 5.
This template have desktop responsive version and the second version Progressive Web Application.
I am currently starting the conversion to CodeIgniter 3. And now I wanted to ask for a suggestion:
In general, the structure of PWA and Desktop is much different. Now how to implement two versions to load for desktop and other for mobile?
I just prepared a desktop version for CI3, structure:
root/application/index.php - home page
root/application/partials/_header
root/application/partials/_footer
Desktop working fine. Can anyone give me a suggestion on how to disable this content for mobile devices now and make my way to PWA code implementation?
Should I open each file example _header and all content make with:
.d-none .d-xl-block
and below add content PWA with
.d-none .d-sm-block
(of course it's just an example, I know there is also lg, etc. it's about the method) - because it doesn't look good to me, so I'm asking for a suggestion.
Related
I have deployed a personal flutter-web project on firebase and the responsiveness is working fine. As in when the website is opened on a laptop it shows a UI specific for large screens and when it's opened on the mobile phones (chrome browser) it shows UI for mobile screens.
Now the problem is, whenever I check "Desktop Site" in the chrome browser, I get the UI that is meant to be shown for larger screens which is okay, but it looks stretched vertically, and the appbar at the top is also not visible.
so my question is,
Is there a way that I could check whether browser's desktop-site mode is ON?
or any other way that I could just make the website look like a zoom-out version of web UI whenever desktop-site mode is ON?
We were not shown the code. Therefore, it is difficult to say for sure. But I had such problems when I ran the application building without parameter --web-renderer
flutter build web
The point was that by default it uses different renderers (CanvasKit for desktop and HTML for mobile). And since I used things that required CanvasKit, the application in mobile browsers was displayed incorrectly.
Building with the appropriate parameter solved my problem
flutter build web --web-renderer canvaskit
I'm currently trying to use CSS media queries to optimise my website for mobile view, and am using Google Chrome with an extension to resize the viewport on my desktop to adjust my content for mobile.
The problem I'm having is when i'm designing and changing on my laptop at the mobile phone resolution, everything works fine (see first picture) but when I actually load the website on my mobile, I'm not getting the same view as what I'm getting from the laptop (see second picture).
I've used
<meta name="viewport" content="width=device-width, initial-scale=1">
to set my width for mobile
I know the font is different because it's a third party i've installed onto my laptop so thats not the problem.
Just wondering if theres any easier way of actually creating responsive views for mobile such as using applications like Phonegap or if anyone can give me tips on how to properly create responsive content for mobile.
Thanks in advance
EDIT:
The second picture is larger because it was as a screenshot from my mobile phone, the screen sizes aren't different.
I suggest watching the New Boston's Responsive Web Design Playlist:
He will teach you the important basic concept of a responsive design using percentage and also creating your own custom menu or button in a responsive mobile version(that makes it almost like a mobile app in a browser).
https://www.youtube.com/watch?v=yWgl3xXVlHI&list=PL6gx4Cwl9DGBaTsb1nse1UU48d_q7glGT
You should consider using bootstrap. It is a mobile first front-end framework for faster and easier web development
http://getbootstrap.com
#John Appleseed
use the Inspector
"Toggle device mode" or "Ctrl + Shift + M"
time you try your web site
and not just resize the page
I don't know your CSS but have a look at this
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Came across an interesting problem that's really stumped me when attempting to implement the Twitter Bootstrap framework today. The issue I was initially attempting to solve was the appearance of horizontal scrollbars in Chrome when I resized the browser close to the breakpoints in the responsive template.
To troubleshoot this, I decided to copy the starter template verbatim, which was displaying correctly for me on the Twitter Bootstrap site. For extra consistency, I altered the relative paths of the included Bootstrap resources to point directly at the same files hosted on Github.
Mind-bogglingly, the problem still occurred even using the exact same code. You can view a working example of the broken version here. Just resize the window horizontally in the latest version of Chrome and you'll notice scrollbars will appear on the bottom when the width nears a breakpoint. On a hunch, I copied the same file over to a different server and...it works?!
I honestly don't have a clue what could be causing HTML/CSS/JS to be behaving differently in the same browser across two different servers. The closest I could find were discussions from developers transferring files from local to remote environments and/or using IE. Any insight would be much appreciated!
I'm guessing Chrome was zoomed in.
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?
I'm designing an iPad app using HTML in Indesign CS6. It's really a fairly simple 3 column site with some Fancybox effects.
The problem I've been having is that when I preview the site in my iPad browsers, it looks exactly as it should.
However, when I load the HTML files into InDesign and publish/preview it on the iPad 3, everything is zoomed in. It's like it's treating it like it's at 768x1024 resolution, even when the document settings are for the iPad 3's 1536x2048 resolution.
I do have the site built using an 800px container div. I am not sure if this has something to do with the display issues, though.
Does anyone have any experience with an issue like this? I'm not terribly familiar with the Adobe digital publishing tools yet, but I can't seem to find anything about this on the web.
thank you in advance!