ExtJS web displays appear differently when viewed on Chrome's toggle device mode versus a mobile browser

Greetings, I have been working on developing a web application that can be accessed through a mobile browser.

Initially, I created the web application and tested it in mobile mode using Chrome's simulation feature.

https://i.sstatic.net/aAvVW.jpg

However, when I tried accessing the site from an actual mobile device, the display was different compared to what I saw in Chrome.

https://i.sstatic.net/LlqwN.jpg

I am at a loss on how to resolve this issue. Could anyone kindly provide me with suggestions or relevant keywords for conducting a search on Google?

Thank you

javascriptcssextjsbrowserextjs5

Answer №1

I managed to find a solution.

Within the ext-all.js file, there is a function called initMeta that is used to set meta tags.

initMeta: function() {
                var me = this,
                    maxScale = me.maxUserScale || 1;

                me.addMeta('viewport', 'width=device-width, initial-scale=1, maximum-scale=' +
                       maxScale + ', user-scalable=' + (maxScale !== 1 ? 'yes' : 'no'));
                me.addMeta('apple-mobile-web-app-capable', 'yes');
            },

We can adjust the value of initial-scale to be less than 1 for our specific needs.

Hopefully, this tip will prove helpful to others facing similar issues.

UPDATE

I have come up with a better way to avoid making changes to ext-all.js.

Within the app.js file, I added the following code snippet inside the launch function:

launch: function() {
    if (Ext.supports.Touch) {
        var head = Ext.getHead(),
            viewportMeta = head.dom.getElementsByTagName('meta')[0];

        viewportMeta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=1, user-scalable=yes');
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sorting information in the React Native Section List

Working with React Native's SectionList and filtering data: data: [ { title: "Asia", data: ["Taj Mahal", "Great Wall of China", "Petra"] }, { title: "South America", data: ["Machu Picchu", "Christ the Redeemer", "C ...

javascriptreactjsreact-nativereact-native-sectionlist

CSS: Alignment of Lists with Three Items

In my CSS, I am aligning two parts of a list item to the left and right side like this: ul li div.left { float: left; } ul li { text-align: right; } <ul> <li><div class="left">On the left</div>On the right</li> ...

htmlcsslist

Achieve a scrolling effect for just a specific section of an HTML page

Hey there! I'm currently working on adding scrolling text along the side of a webpage for a specific section. My goal is to have three different sections, each with text that stops scrolling when you reach it and then transitions to the next section o ...

javascripthtmlcss

The Yeoman/Grunt-usemin is failing to update the index.html file even after adding new JavaScript code

As I work on developing a web app using Yeoman and the Angular generator on Windows 7, I go through the process of running 'yo angular' followed by 'grunt' to build the app for deployment. The index.html file in the dist folder gets upd ...

javascripthtmlnode.jsyeoman

When you try to import a component, it may result in a blank page displaying an error message stating: "TypeError: Cannot set property 'components'

One interesting feature is the Vue component named DisplayContent, <template> <div></div> </template> <script lang="ts"> import { Vue, Component } from "vue-property-decorator"; import Home from "@/ ...

javascriptvue.jsvuejs2vuetify.js

Using jQuery to append a single AJAX response at a time

I wrote a piece of code that utilizes an ajax request to communicate with json-server, retrieving data which is then displayed in an html div using jquery .html(). The content shown in the div depends on the button clicked by the user. While .append() work ...

javascriptjqueryhtml

How can I retrieve a global variable in Angular that was initialized within an IIFE?

I'm a beginner in Angular, so I ask for your patience. Currently, I am in the process of migrating an app from Asp.net MVC5 to Angular. One of the key functionalities of this application involves connecting to a third-party system by downloading a Jav ...

javascriptangulartypescript

Filling in the fields based on the data in the JSON

I prefer not to rely on jQuery for this task. If possible, I would like to maintain the presence of <mytag>. The JSON data structure I am working with is as follows: { "datas": [ { "id": "hotel_name", "value": ...

javascriptjson

Is there a way to link two HTML files containing jQuery within an HTML index file?

I'm currently working on creating an index page for a pair of HTML files that utilize jquery. Let's break down the structure of these files: Emps1, Emps2: These are two HTML tables that start off empty. TabA_stats, TabB_stats: Each HTML file ha ...

javascriptjqueryhtmlcss

The save functionality is not working due to a JavaScript issue

Having an issue with the save button functionality. The JavaScript code specified for the button seems to interfere with its ability to save information. Interestingly, when I remove the JavaScript it works perfectly and saves the data as intended. (fun ...

javascriptjquerybutton

Creating Javascript objects using provided JSON data

Good day! I am looking for assistance in understanding how to create objects from JSON data that has been provided: { "type":"FeatureCollection", "features":[ { "type":"Feature", ...

javascriptreactjsjsonobject

Loading a gallery dynamically using AJAX in a CakePHP application

I am currently working with Cakephp 2.8.0 and I am facing an issue with implementing ajax in my application. I have a list of categories displayed as li links, and upon clicking on a category, I need to remove certain html code, locate the necessary catego ...

javascriptphpjqueryajaxcakephp

One login for accessing multiple forms

I am trying to figure out a way to use one login for two different forms that serve different functions. How can I pass the login details between these two functions? Just to clarify, I only have knowledge of JavaScript and VBScript, not jQuery. For inst ...

javascripthtmlasp-classic

Change the space character ' ' to '-' when a key is lifted

Hey, I need some help with a coding problem. I have two input fields and I want to automatically mirror the text from the first input into the second input field using a keyup jquery function. However, my current setup adds a space whenever I hit the spac ...

javascriptjqueryinputkeyup

Unable to store loop information fetched from api into a JSON file

I'm currently facing an issue with my code where I am trying to save the results from looping through an API into a JSON file using writeFileSync. Here is the code snippet in question: function processRarity(limit) { var resultJson = []; for ( ...

javascriptarraysjsonobject

Unsynchronized Request Sequencing

Seeking advice on enhancing a previously accepted answer related to chained ajax requests can lead to some interesting solutions. One proposed solution involves sequencing 3 ajax requests in an asynchronous chain: var step_3 = function() { c.finish() ...

javascriptjqueryajaxasynchronous

Managing the state of dynamically generated tabs within a NextJS application

Looking to develop a web app in Next.js that includes tabs components. The goal is to manage various entities within each tab, such as utilizing a search bar to select different products. Upon selecting a product, a new tab will be generated with the produ ...

javascriptreactjstypescriptnext.js13

Why is there a discrepancy between the value displayed in a console.log on keydown and the value assigned to an object?

As I type into a text box and log the keydown event in Chrome, I notice that it has various properties (specifically, I'm interested in accessing KeyboardEvent.code). Console Log Output { altKey: false bubbles: true cancelBubble: false cancelable: t ...

javascripthtmlangulartypescriptgoogle-chrome-devtools

The challenge of populating information within a Datalist

In my code snippet, I have a JavaScript function that is used to populate a Datalist: function PopulateDropDown(facility) { $.ajax({ url: '/Rentals/Base/GetContactsForFacility?selectedFacility=' + facility, data: { facility: ...

javascriptajaxasp.net-mvcresponse

Combining 2 divs harmoniously

I have a set of HTML div elements that are styled using the following CSS: div{ width:250px; height:250px; display:inline-block; border-radius: 10px; margin:10px; background:#2E2922; vertical-align:top; } In my HTML, these div ...

htmlcss