在手机模式下直接打开页面时，响应性不佳 [英] Responsiveness not working well when we open page direct in mobile phone mode

问题描述

我在我的网页中使用了radgrid.i为其reponsiveness添加了bootstrap和css类。当我在笔记本电脑浏览器中打开页面时，响应性运行良好，当将浏览器大小减小到平板电脑模式和移动模式时，响应也运行良好。 ..但是当我直接在手机模式下打开此页面或浏览此页面时保持浏览器处于手机模式，然后响应性不能正常工作..我可以解决这个问题...我的css课程如下：



我尝试过：

< style> 
 .myradGrid 
 {
 overflow：auto; 
过渡：.3s全部; 
 outline：none！important; 
 border-radius：.25rem！important; 
 border：1px solid＃e9e9e9！important; 
} 
< / style> 

解决方案

确保radgrid控件与bootstrap的版本兼容你添加了。 Bootstrap 4与bootstrap 3完全不同。



尝试在手机网格中查看表格数据是愚蠢的。你无法在一个小的屏幕上以有意义的方式显示数据网格。您唯一真正的办法是减少列数，并且每删除一列，您的数据就变得越来越没有用处或者有用了。



我的建议是切换到一个数据列表来表示一行中的一个列，并让用户滚动列表，可能会提示下一个 item按钮，用于简化滚动的工作。

请检查是否在html文件中添加了响应式元标记。



在浏览器调整大小如果你没有添加元标记响应将

工作，但移动将不会像这样工作所以请检查html文件中的元标记



响应元标记：

< meta name =viewportcontent =width = device-width，initial-scale = 1.0\" > 

i am using radgrid in my webpage.i added bootstrap and css classes for its reponsiveness.when i open the page in laptop browser then responsiveness working well and when decrease browser size into tablet mode and mobile mode then responsiveness also working well...but when i open this page in mobile phone mode directly or navigate this page keeping keeping browser in mobile phone mode then responsiveness not working well..how i can resolve this problem... my css class given below:

What I have tried:

<style>
.myradGrid
{
overflow: auto;
transition: .3s all;
outline: none !important;
border-radius: .25rem !important;
border: 1px solid #e9e9e9 !important;
}
</style>

解决方案

Make sure the radgrid control is compatible with the version of bootstrap that you added. Bootstrap 4 is a radical departure from bootstrap 3.

Attempting to view tabular data in a grid on a phone is, well, stupid. There's no way you can display a data grid in a meaningful way on a screen that small. Your only real recourse would be to reduce the number of columns, and with each column you remove, your data becomes less and less menaingful or useful.

My advice would be to change over to a list of data to represent one colum on a single line, and let the user scroll the list, possibly proviing a "next item" button to ease the chore of scrolling.

Please check are you add the responsive meta tag in html file.

In browser resize if you not add the meta tag the responsive will
work but mobile will not work like this so please check meta tag in html file

Responsive for meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这篇关于在手机模式下直接打开页面时，响应性不佳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！